01
视觉规则
颜色、字体层级、间距基线、圆角、边框、阴影和明暗模式，不只是一句风格形容词。
AI-FIRST DESIGN WORKFLOW
Claude Code UI 设计风格与前端提示词
Claude Code 负责生成代码，StyleKit 负责把“看起来像什么”说清楚。先锁定风格和页面场景，再给 Claude Code 明确的 tokens、组件边界、状态和验收标准。
一份可执行的 UI 设计 brief 包含什么？
02
组件约束
把导航、卡片、按钮、表单、表格和空状态写成可复用的组件行为，减少 AI 每次自由发挥。
03
验收条件
补上响应式断点、可访问性、交互状态和不能出现的元素，让生成结果更接近你的目标。
用 Claude Code 开始一个项目的顺序
- 1
先从风格目录选择一个视觉方向，并打开它的颜色、tokens 和组件说明。
- 2
把页面目标、用户、内容结构和风格约束合并成一段 brief，不要只说“做得高级一点”。
- 3
让 Claude Code 先搭建信息架构和组件骨架，再逐块实现视觉效果，最后用移动端和键盘操作验收。
Prompt skeleton
Build a Claude Code interface using one StyleKit visual direction. Include: - explicit colors, typography, spacing, radii, and shadows - reusable components with hover, focus, loading, and empty states - responsive behavior and keyboard-accessible controls - a short list of visual choices that must not drift
从风格约束开始，而不是从随机灵感开始
每个风格页面都可以作为 AI 的上下文来源。选择一个方向后，再按页面场景调整密度和组件，而不是把多个互相冲突的风格词堆在同一个 prompt 里。
新野兽派
大胆的黑色粗边框、硬边缘阴影、无圆角、高对比度配色。源于建筑野兽派，强调功能与原始美学。包含经典、柔和、俏皮三种变体。
编辑杂志风
优雅的杂志排版风格，衬线标题、无衬线正文、精致的留白和网格系统。灵感来自高端时尚杂志和报纸排版。
新拟物派
柔和的内凹外凸立体效果，通过双重阴影模拟光源，浅色背景配同色系元素，营造精致的立体感。
玻璃拟态
半透明毛玻璃效果，通过 backdrop-blur 模糊背景、柔和边框和微妙阴影，创造现代感十足的层叠界面。
便当盒布局
灵感源于日式便当盒的不规则网格布局，通过大小不一的卡片组合创造视觉层次，常用于作品集和产品展示。
企业简洁风
专业简洁的企业风格，强调可读性、一致性和信任感。适合B2B SaaS、企业官网、后台管理系统。
继续深入
FAQ
Claude Code 能直接使用 StyleKit 吗？
可以把 StyleKit 页面中的设计规则和提示词复制到 Claude Code 的上下文中使用。StyleKit 不依赖某一个模型，重点是让设计约束可读、可复用、可验证。
为什么只写一个风格名称不够？
“玻璃拟态”或“极简”只能表达方向，不能约束实现。颜色、字体、间距、组件状态和响应式规则越具体，AI 越不容易生成一套换个页面就崩掉的界面。
StyleKit 适合什么项目？
适合落地页、SaaS、仪表盘、作品集、后台和组件库等需要统一视觉语言的网页项目，尤其适合在 AI 辅助编码时作为设计上下文。