Onevium 前端视觉方向
在真正的绿地设计中先确定系统，再制作高保真界面。目标是给后续决策建立依据，避免边做边发明互相冲突的默认值。
1. 确认确实没有既有语境
检查品牌规范、现有产品、参考网站、代码库 token 和局部设计系统。任何可用来源都应优先复用；用户有材料但未提供时先索取。
2. 明确意图
确认期望感受的三个形容词、受众、行业、喜欢的参考及具体原因、禁用风格和素材限制。若用户无法决定，给出 3–4 个真正不同的方向，每个写明背景色、强调色、字体组合、密度和理由；至少一个方向应明显跳出常见答案。
3. 锁定系统
- 排版：明确标题、正文和必要的等宽字体、字重及字号阶梯，最多 1–2 个家族。常见字体可以使用，但必须有品牌、可读性、语言覆盖或技术理由。
- 颜色：选择暖、冷或中性色调，定义主色、至多一个强调色、语义色和中性色阶。无品牌时可用
oklch()构建协调色板。 - 密度：选择 4px、8px 或项目明确的间距基础，并确定紧凑、常规或宽松。
- 圆角与阴影：确定锐利、柔和或胶囊式，以及一套统一层级；不要混用多套阴影逻辑。
- 组件：明确主要与次要控件默认采用填充、描边、幽灵或抬升样式。
- 图像与图标：确定真实摄影、专业插画、正式图标集或诚实占位符；不要把临时装饰当最终资产。
- 动效：选择克制、表现型或活泼，并定义基本时长与缓动；同时考虑减少动态效果设置。
米白、展示衬线和陶土色的暖编辑风本身合法，但只有简报确实支持时才选；不能作为所有产品的默认视觉答案。
4. 记录并试做
把方向写入源文件顶部的简短注释或项目设计决策文档，包含每个轴的具体选择和 token。然后先制作一个小表面，例如 Hero、卡片或按钮组，验证它是否符合三个形容词；通过后再扩展。
后续所有页面引用已定义 token。需要新值时先扩展系统，再使用，不在页面中散落一次性色值。
示例
输入：“这是一个全新的开发者工具，没有品牌，先帮我定视觉方向。”
**输出：**给出三套差异明显的方向，经用户选择后记录字体、冷中性色板、紧凑 4px 密度、4px 圆角、边框式组件和克制动效，并制作一组 Hero 与按钮验证方向。
来源与许可
本 Skill 基于 Trystan Sarrade 的 claude-design-system-prompt 进行中文化与 Claude Skill 规范适配。上游与本改编均按 MIT License 发布，详见 LICENSE.txt。