---
name: style
description: 基于当前项目的设计令牌、主题、页面和用户参考设计前端视觉规范或 CSS、SCSS。适用于颜色、排版、间距、主题、响应式与状态样式；组件选型、业务表单结构和完整页面实现不应触发。
---

# 前端样式设计

延续项目已有视觉语言，或在输入充分时建立中性视觉基线。不得把固定品牌、颜色、断点或模板强加给项目。

## 工作流

1. 确认框架版本，并检查设计令牌、主题配置、全局样式和代表性页面。
2. 按 [来源优先级](references/sources.md) 确定现有设计权威与用户参考的关系。
3. 识别需要继承、补充或覆盖的颜色、排版、间距、圆角、阴影、断点和交互状态。
4. 按 [输出约定](references/output.md) 给出规范或样式修改，并说明未验证风险。
5. 需要写入 `.craftkit/standards/frontend/design.md` 时，先展示拟写内容和合并策略，经用户确认后再修改。

如果项目没有视觉基线，先询问用户是否有设计稿、截图或参考项目；输入仍不足时只给出待确认项，不擅自确定品牌风格。

## 边界

- 优先复用已有变量、令牌和主题能力，避免散落的任意值。
- 断点由项目目标设备、现有规则或用户要求决定，不内置固定矩阵。
- 组件契约交给 `component`，表单结构交给 `form`，业务页面实现交给前端实现 Skill。
- 未进行真实渲染或浏览器检查时，不宣称视觉验收通过。