ClaudeSkills
全部合集

设计

设计一个产品

把视觉参考转成一致的产品界面，再对照明确的设计规则检查。从风格提取、原型到复核，按任务选用技能。

5 项技能4 个步骤

任务流程

按输入条件选择适合的步骤。使用前查看各技能的来源与前置条件，并在每次交接时复核实际产物。

  1. 01

    明确设计语言

    根据提供的参考记录字体、表面、间距和组件决策，形成 DESIGN.md。区分实际观察到的数值与为新产品做出的选择。

    Extract DESIGN.md
  2. 02

    制作一张有代表性的页面

    用 Stitch 生成设计草稿，或用 frontend-design 实现界面。从最能体现产品核心交互的页面开始。

    Generate Interface DesignsFrontend Design
  3. 03

    保持系统一致

    把已确认的设计令牌和组件延伸到后续页面。多个页面或贡献者需要共用参考时，用设计系统管理技能维护一致性。

    Manage a Design System
  4. 04

    检查实际界面

    检查已实现页面的可访问控件、键盘操作、响应式布局及声明的界面规范。记录检查过的内容与尚需测试的部分。

    Web Design Guidelines

合集内的技能

查看单项技能页，了解固定版本的来源、许可、安装路径和作者声明的兼容性。