Token导航 LogoToken导航

Agent Skill · 前端设计

design(设计)

用于辅助界面设计、视觉规范、排版、配色、布局和交互体验优化。它适合让 Agent 根据产品场景整理页面结构、生成 UI 方案、检查视觉一致性或改进组件层级。使用时需要结合现有品牌、设计系统和用户任务,不应只堆装饰元素;涉及真实页面改动时,应通过截图或浏览器预览检查文本溢出、对齐和响应式表现。

design 是前端设计类 Agent Skill,可用宿主为 Codex、Claude、Cursor、Gemini CLI,通过GitHub 仓库获取,权限为接触敏感数据;许可证为 MIT,第三方扫描已通过,按安装量在前端设计类的 10,216 个 Skill 里排第 7,947。

总安装 326周安装 14GitHub Stars 21下载 114核验 2026-05-01

安装说明

本站只整理中文说明,不托管安装包,也不代用户安装。
GitHub
许可证
MIT

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手,先确认命令和权限,再让它执行。

请帮我安装这个 Agent Skill:design(设计)
来源仓库:https://github.com/matteocervelli/llms
仓库路径:skills/design
安装命令:
npx skills add https://github.com/matteocervelli/llms --skill design
安装前请先检查当前环境是否支持对应 CLI,并向我确认将要执行的命令、安装目录、联网范围和文件读写权限;确认后再执行。

命令行安装

复制命令到本机终端执行。不同来源提供的安装方式可能略有差异;本站展示可直接复制的安装命令,安装前请核对来源页面。

skills.shnpx skills
npx skills add https://github.com/matteocervelli/llms --skill design

这个 Skill 是做什么的

前端设计类 Skill 关注页面结构、视觉规范和组件写法,输出通常是可运行的界面代码。

design 用于辅助界面设计、视觉规范、排版、配色、布局和交互体验优化。可帮助 Agent 整理页面结构、生成 UI 方案、检查视觉一致性或改进组件层级。使用时需结合现有品牌、设计系统和用户任务;涉及真实页面改动时应通过截图或浏览器预览验证效果。安装前建议确认权限范围、维护状态及是否触发联网、命令执行或文件读写。

design 属于前端设计类 Skill,可作为该场景下的辅助能力补充。

来源仓库内路径:skills/design

上手步骤

4 步
  1. 1

    确认自己的宿主工具

    公开资料标注支持 Codex、Claude、Cursor、Gemini CLI;先确认自己用的是其中之一,再按对应工具的 Skills 目录放置。

  2. 2

    拿到安装命令

    可以直接复制的命令是 npx skills add https://github.com/matteocervelli/llms --skill design;命令里的占位符换成自己的路径或密钥再执行。

  3. 3

    安装后重启宿主

    命令执行完要完全退出宿主工具再打开,让新装的 Skill 被重新扫描到,否则列表里可能看不到。

  4. 4

    按最小权限试用

    它需要接触敏感数据,先在测试目录或测试账号里跑,确认没问题再放到正式项目。

常见问题

6 条

design 怎么安装?

在终端执行 npx skills add https://github.com/matteocervelli/llms --skill design。装完完全退出宿主工具再打开,让它重新扫描本地 Skill。

design 支持哪些 AI 工具?

公开资料标注支持 Codex、Claude、Cursor、Gemini CLI。其他工具只要能读取本地 Skill 目录,一般也能手动放进去,但要自己确认触发方式是否一致。

design 需要什么权限?

权限级别是接触敏感数据。该 Skill 可能接触密钥、Token、环境变量或敏感配置,应进入高风险复核队列,默认不自动发布。

design 是免费的吗?

来源标注的许可证是 MIT。本站不代收任何费用,也不托管安装包;能否商用、要不要署名,以许可证原文为准。

design 用的人多吗?

公开数据是累计安装 326 次,近一周安装 14 次,下载 114 次,GitHub 21 星。这些数字来自第三方目录统计,只能当作热度参考,不代表质量或安全性。

design 安全吗?

第三方扫描结果为通过,但这只覆盖已知的静态检查项,不能替代自己读一遍源码和安装命令。

值得选的地方和要先想清楚的地方

值得选的地方

  • 同时适配 4 种工具,换客户端不用重新找替代品。
  • 3 个目录同时收录,说明这个 Skill 流传比较广。
  • 许可证明确为 MIT,商用和分发边界好判断。
  • 第三方扫描已通过,常见的高风险行为没有命中。

先想清楚的地方

  • 需要接触敏感数据,装到常用环境前要先评估影响面。
  • 第三方目录整理,版本更新和行为细节以来源仓库为准。

适不适合你

更适合

  • 已经在用 Codex,想直接扩展它能力的人。
  • 需要处理前端设计类任务、又不想每次都手写提示词的人。
  • 需要许可证清楚、并且有第三方扫描结果的团队项目。

不太适合

  • 环境里有大量密钥、凭证,不方便给第三方 Skill 读取的人。
  • 需要厂商级技术支持和 SLA 的生产系统。

前端设计类 Skill 对比

6 个同类
Skill总安装GitHub 星权限许可证扫描
frontend-design

前端设计 · Codex、Claude

8,823,360126,072只读MIT通过
vercel-composition-patterns

Vercel 组合模式 · Codex、Claude

3,858,81625,893需要联网MIT通过
vercel-react-native-skills

Vercel React native skills 前端 · Codex、Claude

2,468,66425,878只读MIT通过
adapt

adapt 搜索 · Codex、Claude

2,027,04023,125操作浏览器未明确通过
bolder

bolder 分析 · Codex、Claude

2,004,28823,130只读未明确通过
design

设计 · 本页

32621接触敏感数据MIT通过

按安装量取同分类前几名;数字来自第三方目录统计,只作热度参考,不代表质量结论。

SKILL.md 原文

Feature Design Skill

Purpose

This skill provides systematic guidance for designing software architecture, API contracts, data models, and workflows based on analyzed requirements.

When to Use

  • After requirements analysis is complete
  • Need to design technical architecture for a feature
  • Defining API contracts and data structures
  • Planning module interactions and data flows
  • Before starting implementation

Design Workflow

1. Architecture Design

Choose Architectural Pattern: Review architecture-patterns.md for appropriate patterns:

  • Layered Architecture: UI → Business Logic → Data Access
  • Modular Architecture: Cohesive modules with clear interfaces
  • Event-Driven: Message-based communication
  • Microservices: Independent, deployable services (if applicable)

For This Project (Python):

  • Follow existing structure: src/tools/, src/core/, src/utils/
  • Use dependency injection for testability
  • Keep files under 500 lines (split if needed)
  • Maintain single responsibility principle

Define Components:

Component Name: <name>
Responsibility: <what it does>
Dependencies: <what it needs>
Interfaces: <public API>

Deliverable: Component diagram with responsibilities

2. Data Model Design

Define Entities:

  • Identify domain entities from requirements
  • Define attributes and types
  • Specify relationships (one-to-one, one-to-many, many-to-many)
  • Define validation rules
  • Consider data lifecycle (CRUD operations)

For Python Projects:

from pydantic import BaseModel, Field
from typing import Optional, List
from datetime import datetime

class EntityModel(BaseModel):
    """Entity description."""
    id: Optional[int] = None
    name: str = Field(..., min_length=1, max_length=255)
    created_at: datetime = Field(default_factory=datetime.utcnow)

    class Config:
        """Pydantic configuration."""
        validate_assignment = True

Deliverable: Data models with Pydantic schemas

3. API Design

Design API Contracts: Refer to api-design-guide.md for best practices

REST API Pattern:

Resource: /api/v1/resources
Methods:
  GET    /resources        - List resources
  GET    /resources/{id}   - Get single resource
  POST   /resources        - Create resource
  PUT    /resources/{id}   - Update resource (full)
  PATCH  /resources/{id}   - Update resource (partial)
  DELETE /resources/{id}   - Delete resource

Request Body:
  {
    "field1": "value",
    "field2": 123
  }

Response Body:
  {
    "data": {...},
    "meta": {
      "timestamp": "2025-01-15T10:30:00Z",
      "version": "1.0"
    }
  }

Error Response:
  {
    "error": {
      "code": "VALIDATION_ERROR",
      "message": "Field validation failed",
      "details": [...]
    }
  }

For Internal APIs (Python Functions/Methods):

def process_feature(
    input_data: InputModel,
    options: Optional[ProcessOptions] = None
) -> ProcessResult:
    """
    Process feature with given input.

    Args:
        input_data: Input data model
        options: Optional processing options

    Returns:
        ProcessResult with outcome

    Raises:
        ValidationError: If input is invalid
        ProcessError: If processing fails
    """
    pass

Deliverable: API specification with request/response formats

4. Data Flow Design

Map Data Flows:

  • Input sources (user input, API, database, file)
  • Processing steps (validation, transformation, business logic)
  • Output destinations (response, database, file, external service)
  • Error paths and handling

Sequence Diagram Format:

User → API Endpoint → Validator → Business Logic → Repository → Database
                          ↓             ↓              ↓
                      ValidationError  BusinessError  DatabaseError
                          ↓             ↓              ↓
                      Error Handler → Error Response → User

Deliverable: Sequence diagrams for key workflows

5. Module Interaction Design

Define Module Boundaries:

  • Interfaces: Public API contracts (abstract classes, protocols)
  • Core Logic: Business logic implementation
  • Utilities: Helper functions (pure, stateless)
  • Data Access: Repository pattern for persistence

Python Module Structure:

src/tools/feature_name/
├── __init__.py           # Public exports
├── models.py             # Pydantic models
├── interfaces.py         # Abstract interfaces
├── core.py               # Core business logic
├── repository.py         # Data access layer
├── validators.py         # Input validation
├── utils.py              # Helper functions
└── tests/
    ├── test_core.py
    ├── test_validators.py
    └── fixtures.py

Dependency Injection Pattern:

class FeatureService:
    """Service with injected dependencies."""

    def __init__(
        self,
        repository: FeatureRepository,
        validator: FeatureValidator
    ):
        self.repository = repository
        self.validator = validator

Deliverable: Module dependency graph

6. Error Handling Design

Define Error Hierarchy:

class FeatureError(Exception):
    """Base exception for feature."""
    pass

class ValidationError(FeatureError):
    """Input validation failed."""
    pass

class ProcessingError(FeatureError):
    """Processing failed."""
    pass

class NotFoundError(FeatureError):
    """Resource not found."""
    pass

Error Handling Strategy:

  • Validate early (fail fast)
  • Catch specific exceptions
  • Log errors with context
  • Return meaningful error messages
  • Don't expose internal details

Deliverable: Error handling specification

7. Configuration Design

Externalize Configuration:

from pydantic_settings import BaseSettings

class FeatureConfig(BaseSettings):
    """Feature configuration from environment."""

    api_key: str
    timeout: int = 30
    max_retries: int = 3
    debug: bool = False

    class Config:
        env_prefix = "FEATURE_"
        case_sensitive = False

Configuration Sources:

  1. Environment variables (highest priority)
  2. .env files
  3. Configuration files (JSON/YAML)
  4. Default values (lowest priority)

Deliverable: Configuration specification

Output Format

Use the templates/architecture-doc.md template to generate:

# Architecture Design: [Feature Name]

## Overview
Brief description of the feature and design approach.

## Architecture Pattern
[Chosen pattern] with rationale.

## Component Design
### Component 1: [Name]
- **Responsibility**: [What it does]
- **Dependencies**: [What it needs]
- **Interface**: [Public API]

## Data Model
### Entity: [Name]

class EntityModel(BaseModel): field: str


## API Specification

### Endpoint: [Method] [Path]

- **Request**: [Schema]
- **Response**: [Schema]
- **Errors**: [Error codes]

## Data Flows

[Sequence diagrams or descriptions]

## Module Structure

src/tools/feature/ ├── ...


## Error Handling

[Exception hierarchy and strategy]

## Configuration

[Required configuration with defaults]

## Testing Strategy

- Unit tests: [What to test]
- Integration tests: [What to test]
- Mocking strategy: [What to mock]

## Security Considerations

[From security-checklist.md in analysis phase]

## Performance Considerations

- Expected throughput: [N req/s]
- Response time: [< N ms]
- Resource usage: [Memory, CPU]

## Implementation Notes

[Any specific guidance for implementation]

## Open Questions

- Question 1
- Question 2

Best Practices

Architecture:

  • Prefer composition over inheritance
  • Design for testability (dependency injection)
  • Keep modules loosely coupled
  • Follow SOLID principles
  • Keep files under 500 lines

Data Models:

  • Use Pydantic for validation
  • Type hint everything
  • Provide sensible defaults
  • Document field constraints
  • Consider backward compatibility

APIs:

  • RESTful for external APIs
  • Clear function signatures for internal APIs
  • Consistent naming conventions
  • Version APIs from the start
  • Document all parameters and return values

Error Handling:

  • Create specific exception types
  • Log errors with sufficient context
  • Don't catch exceptions you can't handle
  • Provide actionable error messages
  • Consider retry strategies

Supporting Resources

  • architecture-patterns.md: Common architectural patterns
  • api-design-guide.md: API design best practices
  • templates/architecture-doc.md: Output template

Example Usage

# 1. Review analysis report from previous phase
Read docs/implementation/feature-name-analysis.md

# 2. Choose architecture pattern
Review architecture-patterns.md

# 3. Design data models
Create models.py with Pydantic schemas

# 4. Design API contracts
Use api-design-guide.md for REST/function APIs

# 5. Design module structure
Follow project conventions (src/tools/...)

# 6. Generate architecture document
Use templates/architecture-doc.md template

# 7. Review and validate
Check design meets requirements from analysis phase

Integration with Feature Implementation Flow

Input: Requirements analysis report Process: Systematic design using patterns and guidelines Output: Architecture document with specs Next Step: Implementation skill for coding

Design Review Checklist

Before proceeding to implementation:

  • Architecture pattern chosen and justified
  • All components identified with clear responsibilities
  • Data models defined with Pydantic schemas
  • API contracts specified (endpoints or function signatures)
  • Data flows documented (sequence diagrams)
  • Module structure follows project conventions
  • Error handling strategy defined
  • Configuration externalized
  • Testing strategy outlined
  • Security considerations addressed
  • Performance requirements documented
  • Design reviewed by peer (if applicable)
  • Stakeholder sign-off (if required)

平台分布

Codex

29.15%
按下载量换算33

Gemini CLI

22.83%
按下载量换算26

OpenCode

14.36%
按下载量换算16

Antigravity

12.65%
按下载量换算14

Claude Code

7.14%
按下载量换算8

Cursor

3%
按下载量换算3

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

接触敏感数据

该 Skill 可能接触密钥、Token、环境变量或敏感配置,应进入高风险复核队列,默认不自动发布。

安装前确认

本站仅展示第三方公开信息,不托管安装包,不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。

继续浏览同类 Skills