从模板开始,或上传你的设计截图,导出可被 AI 编码工具读取的 Skill 包
品牌主色
点击「生成」用此色派生整套色板
一句话描述设计系统的风格和意图。
这是一个卡片组件,使用你定义的设计 Token 渲染。
John Doe
Designer
light
medium
primary
secondary
tertiary
neutral
on-tertiary
border
error
<!-- Generated by Draft D | Layer 00: Brand Foundation --> # My Brand — 品牌基础 & 设计原则 ## 产品信息 - **品牌名称**:My Brand - **设计系统**:基于 Token 驱动的语义化设计系统 - **图标库**:Lucide Icons(import 自 `lucide-react`) ## 设计理念 本设计系统追求年轻、活力、可信的视觉表达。强调操作的即时反馈和层级清晰的信息组织,让产品在保持专业感的同时拥有鲜明的个性。组件遵循 8px 网格对齐,颜色克制使用强调色作为视觉锚点。 ## 设计原则 1. **清晰**:信息层级分明,操作路径可预期 2. **高效**:减少不必要的装饰,让用户专注核心任务 3. **一致**:所有页面遵循同一套 Token 和组件规范 4. **专业**:视觉风格稳重、可信赖,符合企业级产品定位 5. **极简**:克制的色彩运用,靠层级而非装饰区分内容 ## 语气风格 - **界面文案**:简洁直接,不用感叹号,不用营销语气 - **操作引导**:用动词开头(如「Create Project」「Save Changes」) - **错误提示**:说明原因 + 给出修复建议 - **表单 Label**:使用 Sentence case - **空状态**:提供明确的下一步操作引导 ## Do's and Don'ts ✓ 使用语义化 Token 引用颜色,不要硬编码 HEX 值 ✓ 强调色仅用于关键操作和角标,不大面积铺底 ✓ 间距使用 4px 的倍数 ✗ 不要在同一页面使用超过 3 种强调色 ✗ 不要使用纯黑 #000000 作为文字色 ✗ 不要在小于 12px 的文字上使用 light 字重
How It Works
解压后放进 AI 工具的规则目录,写代码时自动加载
同时支持