@chinhae/atw-cli 0.2.7 → 0.2.9

package/dist/templates/common/bundled-skills/atw-ui/references/layout-and-viewport.md

@@ -0,0 +1,15 @@
+# 布局与视口
+
+## 精准还原
+
+先记录参考图的逻辑视口或已知像素尺寸、完整范围和固定区域。图像像素不等于逻辑视口；无法确定时说明假设。
+
+测量主区域比例、共享对齐线、文字尺度、图片裁切与间距关系。先对齐整体几何与字体，再处理边框、阴影和细节；不因还原任务重新探索风格。
+
+用与参考相当的视口和内容检查差异。参考没有展示的窄屏与状态根据内容约束补充，并区分“参考还原”与“合理延展”。
+
+## 验证重点
+
+实际检查长内容、空内容和当前改动相关状态。移动端注意视口变化、输入面板与安全边距，主操作不能被键盘或固定区域遮挡。
+
+检查页面是否意外横向溢出、滚动是否发生在预期区域、焦点与菜单是否可见，以及缩放或重排后阅读和操作顺序是否仍然清楚。

package/dist/templates/common/bundled-skills/atw-ui/references/media.md

@@ -0,0 +1,45 @@
+# 素材
+
+## 把资产作为设计起点
+
+好的资产可以承担整个页面的情绪、对象识别或信息重心。先问“如果只保留一张图、一个标题和一个动作，哪张图值得占据这个位置”，再决定是否需要更多模块。不要把资产理解为布局完成后填进去的装饰。
+
+跟随设计北极星决定图像的主体、视角、尺度、光线、颜色、材质和留白。页面的字体、背景、边缘处理与运动从这张图建立呼应；也可以通过一个受控的反差突出主动作。统一是共享视觉逻辑，不是对所有图片套同一个滤镜。
+
+后台和工具同样需要资产判断：对象缩略图帮助识别，内容封面支持浏览，地图或空间图帮助定位，必要的示意图解释关系。它们可以成为界面最有价值的部分；不以“这是后台”为由默认只有表格和卡片。纯数据任务确实不受益时保留清楚的数据表达，不硬塞气氛图。
+
+资产要成为结构，而不是装在盒子里的插图：让它跨过版面的分界、占满首屏，或者和文字叠在一起。页面可以是一个完整的世界，而不是“一张页面配一张图”。
+
+先把关键资产放进真实页面看一轮，再延展其他区域。资产未到位时不能把占位版的审美评审视为最终通过。
+
+没有合适的现成资产且宿主已有可用的图像生成能力时，主动制作关键素材，并给它明确的视觉任务；不要因为正在写前端代码就省略这一步。已有优秀素材时围绕它设计，不为证明使用了工具而重复生成。没有相关能力时保留清楚的素材简报与待完成项。
+
+## 先确定表达作用
+
+判断当前差距来自信息与构图，还是缺少能够表达产品和品牌的素材。不要用更多图片、光效和动画掩盖层级问题，也不要仅因代码容易编写，就用通用渐变和几何形状替代必要的图像。
+
+素材可以用于展示对象、解释关系、建立品牌或情绪。先确定内容、位置、尺寸比例、裁切、背景和与文字的对比，再选择现有资源、摄影、插画或生成素材。
+
+素材简报保持可执行：要表达什么、主体是什么、放在哪、宽窄屏如何裁切、哪里承载文字、什么细节不可丢失。若画面已经表达了主题，减少重复解说；叠字区域需有稳定明暗和足够空间，不默认给整张图盖浓重渐变。
+
+## 图片与可编辑界面
+
+实际查看输入图片后再引用其特征。复用质量合适且有使用依据的资源；不足时才生成或重绘。保留原始文件及来源，区分复用、裁切、生成和后处理。
+
+界面文字、按钮、表单、数据标签和常规布局由可编辑元素表达，摄影、插画和特殊视觉放在明确容器中。不把完整截图作为可交互成品。
+
+将素材需求交给宿主可用的生成工具，遵循工具自身的输入与编辑规则。怎样让生成图承担意思、怎样写提示词、怎样把图和页面接成一体，见 [配图](imagery.md)。
+
+图像暂缺时预留合适容器并明确缺项，不自动安装工具、切换收费服务或要求用户把密钥粘进对话。替代素材不能冒充真实产品截图。
+
+同组资产统一主体尺度、视角、光线和边缘质感，避免几张各自漂亮却互不相干的图拼在一起。生成素材不冒充真实现场或产品证据。最终交付保留来源与用途，网页按实际显示尺寸处理文件体积，重要主体在桌面和手机裁切中都必须成立。
+
+## 生成视频的可选路径
+
+需要可叠加的循环素材时，先验证首尾衔接、主体边缘和背景处理。单色背景加抠像只是候选技术；透明、反光物体可能丢失边缘或产生色溢，应在最终页面背景上检查。
+
+需要连续叙事时，可以用前一段的末帧衔接下一段的首帧，或使用一致的关键帧规划。按滚动或手势控制播放进度时，检查寻帧、反向播放、加载和内存占用，不默认把整段视频解码成全部大图。
+
+玻璃、水晶这类需要折射或透光的物体，先在最终页面的背景色上生成画面，让折射和投影烘焙进素材，再用视频抠像模型去掉背景。直接在绿幕上生成再抠像，折射会带着绿色。预渲染的折射和光照只对应生成时的背景，不应承诺会随任意页面内容产生实时物理效果。
+
+透明底的图片或视频适合放在两个区块的衔接处，跨越边界，把上下两部分连成一个画面，比放在容器里更有设计感。

package/dist/templates/common/bundled-skills/atw-ui/references/motion.md

@@ -0,0 +1,101 @@
+# 动效
+
+## 先问值不值得
+
+加动效前先问：如果要手写一周才能做出来，还值得做吗？模型让动效变得免费，但滚动淡入、视差、跟随鼠标和装饰性循环都会增加干扰。每个动效都应承担反馈、引导、连续或品牌表达中的一项。
+
+| 目的 | 适合考虑的方式 |
+| --- | --- |
+| 按下、聚焦、展开或普通状态变化 | 原生能力或已有组件的小范围过渡 |
+| 视图之间的切换、元素换位置 | 共享元素过渡，见下文“界面过渡” |
+| 拖拽、手势、空间变化与复杂编排 | 项目已有成熟动效能力 |
+| 特殊品牌画面、材质、复杂物理效果 | 图片、3D、着色器或预渲染视频，按需求取舍 |
+| 鼠标、触控或滚动控制叙事进度 | 将输入映射到明确的动画进度，处理反向和快速操作；思路见下文“滚动叙事” |
+
+代码动画适合需要精确状态控制的界面，生成视频适合预先确定的视觉变化；不能用视频替代需要动态数据与真实操作的控件。
+
+## 手感
+
+动效的手感从方向的材质和调性推出，用“动作 + 实物”来命名和选参数（弹簧刚度 / 阻尼）：
+
+| 动作 | 实物参照 | 刚度 / 阻尼 | 适合 |
+| --- | --- | --- | --- |
+| 咔嗒 | 磁铁吸合、卡扣、拨动开关 | 350–400 / 10–15 | 按钮、开关、下拉展开 |
+| 滑入 | 气压闭门器、抽屉阻尼 | 250–300 / 20–25 | 底部面板、抽屉、折叠 |
+| 流淌 | 倒蜂蜜、雾气弥散 | 150–200 / 30–40 | 页面转场、主视觉出现 |
+| 砸落 | 锤击、重物落桌 | 400–500 / 5–10 | 确认选择、完成反馈 |
+| 回弹 | 橡皮球、蹦床 | 300 / 8 | 庆祝提示、儿童与游戏 |
+| 漂浮 | 氦气球、飘絮 | 100 / 25 | 冥想、梦幻场景、空闲循环 |
+
+重的材质（石、金属、陶）偏咔嗒和砸落，轻的材质（纸、布、雾）偏漂浮和流淌；高频操作用短促的动作，少见的品牌时刻才用绵长的。喧闹粗粝的方向可以用硬切、80–150ms 的线性跳变和抽帧，作为有意的品牌表达；被禁止的只是没有考虑过的默认缓动。
+
+过冲幅度跟着面积走。整页、面板这类大面积的东西，过冲不超过 1–2%，否则整块画面会晃；徽章、勾选标记这类小东西可以过冲 10–20%，显得有弹性。表里阻尼偏低的参数只用在小物件上。
+
+网页可以把弹簧写成缓动曲线：按刚度和阻尼对位移做数值积分，取 20–30 个采样点写进 `linear()`，时长取位移稳定在终点 0.5% 以内的时刻。不支持的浏览器退回相近的 `cubic-bezier`。
+
+## 界面过渡
+
+**连续。** 用户点的东西就是下一屏的主角。从列表进入详情，被点的那一项放大成详情，其他项淡出；返回时它缩回原位，页面回到原来的滚动位置。原位已经不在视口里，就先把它滚到可见，再缩回去。
+
+**方向一致。** 下一项从右边进，上一项从左边进；打开和关闭互为逆过程；侧面板从它所在的那一侧滑入滑出。方向随意的动画比没有动画更让人迷惑。
+
+**只变形状时不做交叉淡化。** 切换视口、筛选、展开说明、缩放，这类变化里内容还是同一个东西，只是尺寸和位置变了。让外框直接变形，内容立即显示新状态。交叉淡化会让新旧两张缩放不同的画面叠在一起，出现重影。只有内容本身换了，才淡入淡出。
+
+**离开、加入、留下分开处理。** 被移除的淡出，新加入的淡入，留下的滑到新位置。三者用同一种淡化，列表就会整片闪烁。
+
+**选中指示用一块会移动的滑块。** 分段控件、标签页、列表当前项，都用同一块底板滑到新位置，而不是旧的熄灭、新的点亮。选项宽度不同时，宽度一起过渡。首次显示、窗口缩放和字体加载完成后直接放到位，不要从 0 宽度长出来。
+
+**先准备好目的地。** 目的地要加载的内容，例如图片或内嵌页面，先加载或预先渲染好，否则动画会停在一块白屏上。需要来回切换的视图预先渲染并留在页面里，切换时只移动，不重新加载。内容加载完成后再淡入，不先闪一下白底。
+
+**离开比进入快。** 退出时长约为进入的 60–70%，用加速曲线；进入用减速曲线或弹簧。
+
+**到头要有反馈。** 已经是第一项或最后一项时，轻轻顶一下（往返 10–15px），而不是毫无反应。
+
+## 时长和幅度
+
+| 对象 | 时长 | 要点 |
+| --- | --- | --- |
+| 按下、开关、选中指示 | 150–300ms | 按下缩到 0.96–0.98，按下时立即生效（约 80ms），松开再弹回 |
+| 下拉、气泡、提示 | 180–250ms | 从触发点方向展开，缩放从 0.96 左右开始，不从 0 开始 |
+| 面板、抽屉、侧栏 | 250–400ms | 按移动距离取值，越远越长 |
+| 整页或视图切换 | 350–500ms | 超过 500ms 就会让人等 |
+| 首次进入时依次出现 | 每项间隔 40–80ms | 总长不超过 600ms；只在首次进入时播放，重新渲染和恢复状态时不重播 |
+
+悬停上浮 2–4px，阴影随之加深。位移超过 20px 的悬停效果会显得轻浮。
+
+## 看不见的结果要说出来
+
+一次点击产生了看不见的副作用，例如复制到剪贴板、后台保存、发送，就用一条短暂的提示说出结果本身，例如“已复制：……”，而不是只说“成功”。确认类的时刻，例如选中或完成，可以用一次小幅弹出，只在状态第一次变化时播放，重复点击不重播。
+
+## 滚动叙事：视差与一镜到底
+
+滚动当作翻页，它只是翻页；当作摄影机的推拉，页面就能讲故事。品牌、发布和叙事页可以这样做，文档、文章、工具和后台不做；一页最多一段。记忆点先放在用户会做的动作上（点按、拖动、悬停），再考虑滚动；不要把整页做成视差秀。
+
+- **一镜到底。** 整段是一次不切换的镜头。一个主角从头走到尾，可以是产品、一根线、一个形状或一个字，每一步长成、变成或让出下一个画面：推近看到细节，拉远看到全貌，转过去看到背面，穿过去进入下一个场景。动手前先画分镜：每个镜头占多少滚动距离、画面里有什么、什么在动、文字什么时候出现。
+- **停下来再说话。** 每个镜头留一段静止，文字在静止时出现；边动边读很累。
+- **视差要有真实的前后。** 只在画面本来就有远近层次时用：前景的物体、中景、远处的背景，越近动得越多，差别要小。文字不做视差。
+- **转场也是镜头。** 一个圆从某一点扩开，带出下一节；推进一张图，穿过它到达下一节；背景色在章节之间随阅读慢慢变；一句宣言随滚动逐字亮起。每种手法一页只用一次。
+- **倒着滚也成立。** 每一帧只由滚动位置决定，往回滚自然倒放，刷新或跳到中间也立刻是对的画面。不接管用户的滚动。
+- **留出口。** 长段落前给一个跳过入口；减少动态效果时，把每个静止画面按顺序排成普通区块。
+- **代码做不出来的，交给视频。** 用户想要很强的首屏动画，而效果要靠生成视频或序列帧才做得出来，例如角色转身、产品拆解、镜头穿越场景，按 [素材](media.md) 里“生成视频的可选路径”处理；宿主没有视频生成能力时，交付明确的素材需求。CSS、SVG、着色器能完成的仍自己做。
+
+## 体验与性能
+
+沿用项目的运动节奏和组件能力。高频操作反馈直接，不让动画延迟业务完成。
+
+动画要能被打断。连续快速操作时，新动画从当前位置接着走，不跳回起点重播。CSS 过渡会从当前值重新出发，适合高频切换；关键帧动画会从头重播，适合一次性的出场。业务状态立即更新，不等动画结束。
+
+网页连续动画优先用变换与透明度，只声明需要变化的属性；小尺寸的指示块可以直接过渡宽高。逐帧工作要有停止和清理条件，避免频繁交错读写布局，离屏或无任务时停止播放。整页过渡期间页面通常不响应点击，所以整页过渡要短。
+
+明显位移、缩放和滚动特效，要为“减少动态效果”提供等价呈现，此时所有状态直接到位。必要信息和主要操作不能依赖自动播放、声音或动画完整结束。
+
+## 检查动效
+
+静态截图证明不了动效。把播放速度调到 10%，可以用浏览器开发者工具的动画面板，或自动化工具里的动画倍速，在过渡进行到一半时截图。看有没有重影、跳动、元素突然出现，或者从奇怪的位置飞来。逐个检查开始、中间、结束和反向；再快速连按几次，确认不会卡在中间状态。最后开启“减少动态效果”再走一遍。只有实际测量后才报告帧率或性能改善。
+
+## 网页实现提示
+
+- 浏览器原生的视图过渡适合做“同一对象从一处变到另一处”：给前后两个状态里代表同一对象的元素起同一个过渡名，名字在同一时刻必须唯一。
+- 只变形状的过渡里，隐藏旧快照、直接显示新状态，就不会出现重影。
+- 过渡伪元素后面只能跟少数伪类，例如 `:only-child`；写成 `:not(...)` 会让整条规则失效。需要按场景区分规则时，在根元素上加一个属性来切换。
+- 内嵌页面和图片在过渡里会被截成快照；目的地没加载完就开始过渡，会以空白结束。

package/dist/templates/common/bundled-skills/atw-ui/references/visual-language.md

@@ -0,0 +1,88 @@
+# 视觉语言
+
+## 从整体到局部
+
+先查看信息焦点、构图和内容密度，再调整空间、排版、色彩与细节。前一层已经解决问题时，不为显得精修而继续添加样式。
+
+使用项目有效的视觉变量、组件和参考关系。没有标准时只定义当前需要的文字、颜色与间距角色；不凭空生成完整设计系统。
+
+每次修改能说明：哪个可见元素、哪种关系存在问题、调整什么、期待改善什么。源码检查可以证明样式不一致，不能单独证明画面更好。
+
+## 焦点与空间
+
+- 每个任务区域有可辨认的主信息或主动作，辅助信息通过尺度、字重、对比或位置退后；不用多种强强调同时争夺注意力。
+- 同类关系保持同类间距，组内更紧、组间更松。先用对齐与留白建立结构，再判断是否需要容器或分隔线。
+- 留白承担分组、焦点或节奏。工具界面不为追求空旷牺牲必要信息，品牌页面也不强制塞满首屏。
+- 非对称、越界图形或大尺度文字可以表达选定方向，但需要稳定的局部对齐和清楚阅读顺序；不把有意的非对称自动当成错误。
+- 父布局负责区域排列，组件负责自身内部空间。同一距离不要同时由多层样式重复增加。
+- 先把内容直接放在画布上，通过对齐、字号和留白组织。容器只在确有分组、选择、背景对比或操作边界时出现；不要把页面、模块、条目和条目说明逐层套成卡片。
+- 分隔线和边框不要重复。每条线只做一件事：同一处分隔不叠双线、单线再加一个框；留白已经分开的地方不再补线；不要每个层级都画一遍线。线的粗细对应层级，例如粗线分版面、细线分栏，全页一致。线本身是风格的一部分时照样保留，只删重复的那些。
+
+## 字体与内容
+
+- 按标题、正文、辅助信息、标签和数据建立文字角色。角色稳定，层级有足够区别；实际内容长度决定换行和空间。
+- 检查目标语言的字形、字重与回退字体。英文样例好看不能证明中文排版成立；中英混排检查基线与视觉重量。
+- 正文行长与行高服务阅读；密集表格按扫描与比较安排，不套用文章排版。需要纵向比较的数字可使用等宽数字。
+- 重要名称和说明不靠固定高度裁切。确需截断时保留完整内容的可访问入口，避免相近名称截断后无法区分。
+- 先写具体产品内容再调布局。按钮说明动作结果；价值表达使用真实用途，不用空泛口号、虚构背书或无意义英文填版。
+
+### 可读性是交付门槛
+
+字号与行高在真实视口、实际字体和 100% 阅读尺寸下判断，缩略图只能用来判断构图。阅读型页面的中文正文通常从 16–18px 起步，产品界面正文 14–16px，每天长时间使用的高密度工具可以到 13–14px（见设计方向里的密度）；正文无单位行高 1.6–1.75；操作文字通常 14–16px。它们是起点，不是跨产品的死规定。不要靠 9–12px 的说明、低对比细字或压缩行高营造“精致”。信息太多先删冗余、调层级或重排。
+
+多行中文标题通常先用 1.2–1.35 的行高，按真实字形检查。不要照搬英文大写海报的极紧行高，不把标题高度固定为单行，不用负外边距挤压后续内容。展示字确需更紧时，必须看过每个支持视口的实际换行并确认字形不碰撞。
+
+中文断行要主动控制：`text-wrap: pretty` 或 `balance` 只能减少孤字，不能消除。数字和单位（38 秒、47 分钟）、“不会”这类不可拆的词用不换行包起来；首屏说明、页边批注这类短段落按语义手动断句。行末只剩一两个字，或者词被拆到两行，都算缺陷。
+
+验收时看长标题、两到三行正文、中英混排、数字单位与字体回退；在窄屏和放大阅读后检查行间、上下区块及按钮内部。文字重叠、截断关键信息或被相邻区域压住属于未完成。先修行高、内容驱动高度和容器伸缩，再考虑减小字号。
+
+### 示例数据要像真的
+
+示例数据会暴露模板感，即使视觉层已经很好。要避开：整数指标（1,000 位用户、+10%）、张三李四和示例公司、每条都是“2 小时前”、写着“标题”“描述”的占位字、页面上反复出现的“了解更多”“立即开始”。真实数据是不整齐的：1,238 位用户、+1.83%，时间有“刚刚”“昨天 16:12”“3 月 14 日”；名字有长有短，顺带验证长名字的排版。按钮说出具体动作，例如“保存草稿”“周二发送”。一页上有很多演示（组件目录、模板库、功能展示）时，让它们共用一个具体的虚构场景：同一个产品、同一批人、同一组文件和数字，演示之间互相呼应，比各自编一条“示例标题”可信得多；不要把库名、技术栈当成演示内容。
+
+## 色彩与表面
+
+颜色按文字、背景、动作、选中与状态等含义使用。品牌色与语义状态可以共存，但不能只靠颜色区别重要状态。
+
+边框、阴影、材质和渐变要与方向一致，并帮助分层、表达氛围或建立品牌识别。不要把紫色、圆角、渐变列为一律禁用；问题在于无意义重复、主次混乱和不适合任务。
+
+避免每张普通卡片都使用不同的强调色、重边框与重阴影。相同层级保持一致重量；内部嵌套轮廓与外部容器协调。
+
+配色做两个自检：去掉所有发光和模糊后，配色是否还成立；能否说出一个用类似配色的成功产品或出版物。表面层级优先用色温和色相的偏移来区分，而不只靠明暗；背景用带一点温度的中性色；选了黑白方向时，纯白和接近纯黑都可以用，层次靠几级灰来分。
+
+质感按调性的完成度取用，不混用：
+- 精致一端：表面的高光、层次柔和的阴影、细微的冷暖交叉色、细线分隔。
+- 粗粝一端：手工和印刷留下的痕迹，从这个方向的生成引擎里找，不套一组固定的道具。
+
+核对文字、控件边界、焦点和选中态在实际背景上的可辨认性，尤其是图像、透明和动态背景。遵循项目已有的可访问性目标；基础阅读与操作不能依赖猜测。
+
+## 控件与图标
+
+同一界面维持一致的图标语言、光学大小与文字对齐。通用图标优先使用成熟资源；特殊品牌插图单独制作，不为每个标题机械添加图标。
+
+可点击元素需要可识别的入口及相应反馈。默认、按下、聚焦、选中、禁用与处理中表达不同含义；鼠标悬停不能替代触屏与键盘入口。反馈变化保持点击区域与邻近布局稳定。
+
+陌生图标配可见文字；纯图标按钮仍需可访问名称。箭头符号有含义：↗ 表示打开新页面或外部链接，提交、检查这类原地动作不用它。静态标签和装饰不要伪装成按钮，行内按钮不要误触外层卡片动作。
+
+### 图标库也会趋同
+
+模型的默认是 Lucide 或 Heroicons：24px、2px 描边、圆头端点。库本身没有问题，问题是每个方向都用同一套、同一种摆法。图标和字体一样是方向的一部分，在方向卡里写明用哪一套、什么粗细和端点，或者干脆不用。
+
+| 方向的气质 | 可以考虑 | 特点 |
+| --- | --- | --- |
+| 精致、编辑、奢侈 | Phosphor 的 Thin 或 Light，Iconoir | 细描边，配细字重的衬线或无衬线 |
+| 工业、仪器、企业工具 | Carbon，Material Symbols 的 Sharp，Radix Icons | 直角端点、网格严格；Radix 专为 15px 的紧凑界面设计 |
+| 友好、圆润、消费 | Phosphor 的 Fill 或 Duotone，MingCute | 圆角端点，实心或双色 |
+| 中文产品，需要大量业务图标 | IconPark，Remix Icon | 覆盖面广；IconPark 能调描边粗细、端点和主题 |
+| 需要连续调粗细和填充 | Material Symbols | 可变字体，填充、字重、光学尺寸都能连续调节 |
+| 像素、游戏、复古 | Pixelarticons | 像素网格 |
+| 品牌标志 | Simple Icons | 各品牌标志的矢量形状 |
+
+用 Iconify 可以按名称取到上面大多数库的单个 SVG。
+
+- **一个产品只用一套。** 需要补缺时，挑描边、端点和圆角一致的，统一成相同的画布尺寸和描边宽度。
+- **粗细跟字重走。** 图标描边接近同尺寸正文的笔画粗细：细字配 1–1.5px，粗黑体配 2px 以上或实心。图标尺寸约为字号的 1–1.25 倍，按视觉中心和文字对齐，不按外框。
+- **能不用就不用。** 编辑类方向常用字符本身：→ ↗ ※ §、编号、缩写。只在能加快识别的地方用图标。
+- **品牌时刻手绘。** 核心动作、空状态这类少数位置，可以用方向自己的线条语言画专属 SVG；通用动作仍用库。
+- **小样内联。** 自包含小样只内联用到的 SVG，不引用图标字体或 CDN。存量项目沿用已有的库，换库属于改版。
+- **核对许可。** 多数是 MIT、Apache 或 ISC；SF Symbols 只能用在 Apple 平台的界面里，不能用于网页；需要署名的库按要求署名。

package/dist/templates/common/bundled-skills/atw-ui/references/visual-review.md

@@ -0,0 +1,94 @@
+# 视觉评审协议
+
+## 评审者的独立性
+
+选择能实际看图的隔离执行者，不固定供应商、模型价格或参数规模。遵循用户的模型偏好和预算，不假定更贵必然更懂设计。
+
+首次评审与后续独立复查均使用新上下文。只传当前版本的必要证据，不继承制作对话，也不将旧评审粘进去。主 Agent 保留历史，用于判断建议是否反复和修改是否有效。
+
+没有隔离看图能力时，主 Agent 可以直接检查当前画面，但不能称为独立评审。不能看图时只给结构或源码诊断，不根据文件名猜测画面。
+
+## 交接内容
+
+| 提供 | 不提供 |
+| --- | --- |
+| 用户任务、受众、交付范围和目标设备 | 制作者的论证、已经投入的时间 |
+| 已确定的方向、品牌与不可改变约束 | 源码、实现细节与技术借口 |
+| 当前版本截图，注明页面、状态与逻辑视口 | 旧版本截图、旧评分和旧评审结论 |
+| 已实际查看的必要参考与其用途 | 预设问题清单、希望评审者赞同的答案 |
+| 需要评估的可见状态或过程证据；记忆点是动效时，一段 3–5 秒录屏或开始、中间、结束三帧，并写明触发它的动作 | “必须给到某个分数”等通过暗示 |
+
+有记忆点时，评审单独回答：这一刻是否让人记住，动作和结果能否一眼对上。只有静态截图时，评审记录写明记忆点没有评审。
+
+新评审者需要理解任务约束，不能只凭一张图自由改题。参考图用于说明方向或质量基线，精准还原任务除外，不作为要求照抄的目标。
+
+截图文件必须能被评审者访问。交接前确认文件属于当前版本；长页同时提供整体与必要局部，细节图不能替代整体构图。交互只能依据提供的状态与过程证据判断，单张截图不能证明提交或键盘行为正确。
+
+## 可直接使用的评审任务
+
+> 根据提供的用户任务、设计方向、约束和当前画面评审设计。先用一两句话说出这个画面想成为什么体裁和风格；再设想这一体裁里顶尖的设计团队会怎样完成同一任务，可以举一两类真实可参照的作品；然后指出当前画面与那个标准之间差距最大的一到三处。先看主构图、阅读顺序、主视觉和内容与操作的关系，再看排版、空间、色彩和细节。留意过度、夸张或一看就是模型生成的做法并扣分，例如首屏左边大标题、右边说明或图片的默认分栏，无来由的渐变与发光，处处圆角卡片，表情符号图标、随意给文字上色、空泛或晦涩的比喻式文案。画面里多个元素同时争当主角、处处都在用力，也算问题；反过来，处处及格却没有一处让人记住，也指出来，并说出最值得集中发力的位置。留意重复的线框：同一处分隔叠了好几条线，留白已经分开的地方又加线，或者每个层级都画一遍线，让画面发碎。承担风格和结构的线不算问题。单侧的彩色边线（引文、提示、反馈、当前项左边的一条色条）也算问题。画面上的制作说明，例如“示例”“待核实”“示意图”“未接入”，也列进可以直接删掉的文字。体裁指产品本身，例如展览落地页；借用的其他媒介只是风格来源，不按“像不像那个媒介”评判，也不为了更像而建议补上更多部件。如果是工具或后台，再说出一屏能看到几个对象、主动作离当前对象有多远，并和这一体裁里最好的工具比较密度。另外单独列出两类小问题：可以直接删掉的文字，以及对齐、圆角、阴影、标点、状态这类看得出的细节瑕疵；表格和列表要放大看，各列的行线和基线是否对齐。每处问题写清位置、观察、影响和可执行的调整方向，必要时给伪代码或属性关系，不写含糊的散文。敢下判断，给出有主见的建议，不退回安全、容易的做法。区分可观察缺陷与风格偏好；没有明显问题时直接说明，不为凑数提出修改。最后按 10 分制打分，表示当前画面离顶尖水准还有多远。只提供评审，不修改文件，不启动其他评审者。未看到或无法验证的内容明确说明。
+
+如果有同类的优秀作品截图，更好的做法是把它们和当前画面放在一起，例如四张专业作品加一张当前截图，请评审者按完成度和品味排序并说明差距。有视觉基线的比较比“想象顶尖团队”更稳定。这些作品是基线和情绪板，不是要照抄的目标。
+
+用“顶尖团队会怎么做”作为参照，是为了拉高标准、让建议有方向，不是要求照抄某个作品。评审只给方向和具体修改点，不自己重做页面；让评审者直接重做通常时间和成本都会翻倍。
+
+主 Agent 在任务后附实际材料。没有真实材料时不能原样发送模板并让评审者自行想象。
+
+评审同时核对设计北极星是否在构图、字体、素材和交互中形成呼应，突破是否增强主题，以及是否用冗余文字和层层容器掩盖薄弱的主视觉。阅读尺寸下的文字碰撞、过小正文和错误裁切应直接指出；不要仅凭整体缩略图判定可读性通过。
+
+## 给已有界面评审
+
+在已有项目里润色界面时，评审的标准是这个产品自己的设计规范，不是评审者心里的理想风格。规范管“用什么”：哪些颜色、字号、间距、组件；[视觉语言](visual-language.md) 里关于层级、对齐、留白、文字和减法的判断管“怎么用得好”，照常使用。
+
+什么时候用，由 SKILL.md 步骤 4 决定：润色一整页或多页、做完局部重构之后，或者用户要求评审现有界面、没有要求重新设计时。单个元素的小改动不评审；用户要求改版或重新探索时，用上面的正常评审。
+
+### 先确定规范
+
+1. **有成文规范时以它为准。** 优先读 `.atw/spec/` 里界面所在层的 `design-system.md`；其次是设计文档、设计变量（颜色、字号、间距、圆角、阴影）、组件库文档或组件目录。
+2. **没有成文规范时，从现有实现里读出来。** 看设计变量文件和主题配置、共享组件和它们的变体、同类页面的做法，整理一份简短的现状规范：字体和字号层级、每种颜色的用途、间距和圆角、按钮与表单等关键组件的样子、用哪套图标。实现里本来就不一致的，比如三种按钮，以多数用法为准，少数用法记为待统一。
+3. **规范本身有问题时说出来。** 不在评审里悄悄绕开，单独列出，交给用户决定。
+
+### 交给评审者
+
+- 当前版本的截图，注明页面、状态和逻辑视口。
+- 规范：有成文规范时给相关文件或摘录；没有时给整理好的现状规范，再附两三张用了同样组件的其他页面截图，作为一致性的参照。
+- 不能动的清单：品牌、字体、主色、组件库、全局导航，以及用户指定保留的部分。
+- 用户任务和受众。
+
+和正常评审一样，不给源码、制作过程和旧版截图。
+
+### 评审任务
+
+> 根据提供的设计规范、不能改动的清单、用户任务和当前画面，评审这个已有界面。先读规范，再看画面。第一部分，逐条列出画面偏离规范的地方：用了规范以外的颜色、字号、间距或圆角，同类组件长得不一样，没用已有组件而是另做了一个。第二部分，在规范范围内指出最影响完成度的三处问题，依据是层级、对齐、留白、文字、状态和减法这些设计判断。每条建议都要能用现有的设计变量和组件做到；确实需要新增变量或组件时，单独列出并说明理由。不建议更换品牌色、字体、组件库或整体布局。另外列出可以直接删掉的文字，以及对不齐、间距不一这类细节瑕疵。每处写清位置、观察和调整方向。只提供评审，不修改文件，不打分，不启动其他评审者。未看到或无法验证的内容明确说明。
+
+### 处理结果
+
+- 只做一轮。改完由主 Agent 和基线做前后对比，不为分数复查。
+- 偏离规范的问题优先改，改在共享的设计变量和组件上，不在单个页面上覆盖。
+- 需要扩展规范或违背规范的建议，不直接采纳，连同理由交给用户决定。
+
+## 反馈格式
+
+先用短段落说明当前画面如何表达任务与方向。随后按影响列问题，每项包含：
+
+- 位置：页面、区域、状态或元素。
+- 观察与证据：实际看到了什么；不能只说“普通”“不高级”。
+- 影响：妨碍了识别、任务完成、视觉焦点或选定方向中的哪一项。
+- 建议：可执行的调整，必要时提供布局示意或属性关系；不猜不存在的文件与行号。
+- 验证：修改后应检查什么，并指出是否只是主观偏好。
+
+10 分制评分用来衡量差距。分数必须附带具体差距，只有数字的评审不算有效。同一评审模型的前后分数可以比较；不同模型的数值不直接比较，也不把分数当作审美事实。分数高但用户不喜欢时，以用户判断为准。
+
+## 主 Agent 如何处理反馈
+
+先处理任务阻碍、内容错误与明显视觉层级问题，再处理有依据的精修。将接受的反馈映射到实际实现；用户指定的风格不能被评审者随意替换。
+
+评审单独列出的“可以直接删掉的文字”默认照删；只有删了会影响理解时才保留，并在记录里写一句理由。
+
+多个评审对不同方向给出同一条建议时，分别在每个方向里找它自己的落地形式，不用一种实现套到所有方向上。
+
+建议违反用户约束、仅表达另一种偏好或缺乏证据时，可以不采纳并保留简短理由。为了更像借用的媒介而增加部件、线框或装饰的建议，先对照北极星判断，通常不采纳。一次完成相关改动后集中取证；不每改一个细节就重新派发。
+
+记录版本、已接受改动、未解决问题与检查结果。保持相当的视口、内容和状态进行前后比较；后续独立评审只看当前版本，前后收益由主 Agent 检查，重大主观取舍由用户判断。
+
+出现持续换风格、互相推翻或细节调整无可见收益时停止美学循环，保留最符合任务与方向的版本。停止不能掩盖仍然存在的功能缺陷或未经验证的部分。

package/dist/templates/common/skills/update-spec.md

@@ -46,6 +46,7 @@ For triggered tasks, include all sections below:
 | **Discovered a pattern** | Found a better way to structure code | Relevant spec file |
 | **Hit a gotcha** | Learned that X must be done before Y | Relevant spec + "Common Mistakes" section |
 | **Established a convention** | Team agreed on naming pattern | Quality guidelines |
+| **Settled a visual rule** | New design token, component variant, or spacing rule reused across screens | `design-system.md` in the UI layer |
 | **New thinking trigger** | "Don't forget to check X before doing Y" | `guides/*.md` (as a checklist item) |
 
 **Key Insight**: Code-spec updates are NOT just for problems. Every feature implementation contains design decisions and contracts that future AI/developers need to execute safely.

package/dist/templates/markdown/index.d.ts

@@ -21,6 +21,7 @@ export declare const frontendHookGuidelinesContent: string;
 export declare const frontendComponentGuidelinesContent: string;
 export declare const frontendQualityGuidelinesContent: string;
 export declare const frontendStateManagementContent: string;
+export declare const frontendDesignSystemContent: string;
 export declare const guidesIndexContent: string;
 export declare const guidesCrossLayerThinkingGuideContent: string;
 export declare const guidesCodeReuseThinkingGuideContent: string;

package/dist/templates/markdown/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/markdown/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAqBH,eAAO,MAAM,eAAe,EAAE,MAAuC,CAAC;AAGtE,eAAO,MAAM,qBAAqB,EAAE,MACK,CAAC;AAG1C,eAAO,MAAM,yBAAyB,QAAwB,CAAC;AAG/D,eAAO,MAAM,wBAAwB,EAAE,MACH,CAAC;AAQrC,eAAO,MAAM,mBAAmB,EAAE,MAEjC,CAAC;AACF,eAAO,MAAM,gCAAgC,EAAE,MAE9C,CAAC;AACF,eAAO,MAAM,gCAAgC,EAAE,MAE9C,CAAC;AACF,eAAO,MAAM,+BAA+B,EAAE,MAE7C,CAAC;AACF,eAAO,MAAM,+BAA+B,EAAE,MAE7C,CAAC;AACF,eAAO,MAAM,2BAA2B,EAAE,MAEzC,CAAC;AAGF,eAAO,MAAM,oBAAoB,EAAE,MAElC,CAAC;AACF,eAAO,MAAM,iCAAiC,EAAE,MAE/C,CAAC;AACF,eAAO,MAAM,yBAAyB,EAAE,MAEvC,CAAC;AACF,eAAO,MAAM,6BAA6B,EAAE,MAE3C,CAAC;AACF,eAAO,MAAM,kCAAkC,EAAE,MAEhD,CAAC;AACF,eAAO,MAAM,gCAAgC,EAAE,MAE9C,CAAC;AACF,eAAO,MAAM,8BAA8B,EAAE,MAE5C,CAAC;AAGF,eAAO,MAAM,kBAAkB,EAAE,MAEhC,CAAC;AACF,eAAO,MAAM,oCAAoC,EAAE,MAElD,CAAC;AACF,eAAO,MAAM,mCAAmC,EAAE,MAEjD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/markdown/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAqBH,eAAO,MAAM,eAAe,EAAE,MAAuC,CAAC;AAGtE,eAAO,MAAM,qBAAqB,EAAE,MACK,CAAC;AAG1C,eAAO,MAAM,yBAAyB,QAAwB,CAAC;AAG/D,eAAO,MAAM,wBAAwB,EAAE,MACH,CAAC;AAQrC,eAAO,MAAM,mBAAmB,EAAE,MAEjC,CAAC;AACF,eAAO,MAAM,gCAAgC,EAAE,MAE9C,CAAC;AACF,eAAO,MAAM,gCAAgC,EAAE,MAE9C,CAAC;AACF,eAAO,MAAM,+BAA+B,EAAE,MAE7C,CAAC;AACF,eAAO,MAAM,+BAA+B,EAAE,MAE7C,CAAC;AACF,eAAO,MAAM,2BAA2B,EAAE,MAEzC,CAAC;AAGF,eAAO,MAAM,oBAAoB,EAAE,MAElC,CAAC;AACF,eAAO,MAAM,iCAAiC,EAAE,MAE/C,CAAC;AACF,eAAO,MAAM,yBAAyB,EAAE,MAEvC,CAAC;AACF,eAAO,MAAM,6BAA6B,EAAE,MAE3C,CAAC;AACF,eAAO,MAAM,kCAAkC,EAAE,MAEhD,CAAC;AACF,eAAO,MAAM,gCAAgC,EAAE,MAE9C,CAAC;AACF,eAAO,MAAM,8BAA8B,EAAE,MAE5C,CAAC;AACF,eAAO,MAAM,2BAA2B,EAAE,MAEzC,CAAC;AAGF,eAAO,MAAM,kBAAkB,EAAE,MAEhC,CAAC;AACF,eAAO,MAAM,oCAAoC,EAAE,MAElD,CAAC;AACF,eAAO,MAAM,mCAAmC,EAAE,MAEjD,CAAC"}

package/dist/templates/markdown/index.js

@@ -45,6 +45,7 @@ export const frontendHookGuidelinesContent = readLocalTemplate("spec/frontend/ho
 export const frontendComponentGuidelinesContent = readLocalTemplate("spec/frontend/component-guidelines.md.txt");
 export const frontendQualityGuidelinesContent = readLocalTemplate("spec/frontend/quality-guidelines.md.txt");
 export const frontendStateManagementContent = readLocalTemplate("spec/frontend/state-management.md.txt");
+export const frontendDesignSystemContent = readLocalTemplate("spec/frontend/design-system.md.txt");
 // Guides structure
 export const guidesIndexContent = readLocalTemplate("spec/guides/index.md.txt");
 export const guidesCrossLayerThinkingGuideContent = readLocalTemplate("spec/guides/cross-layer-thinking-guide.md.txt");

package/dist/templates/markdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/templates/markdown/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClD,MAAM,SAAS,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;AAEtC;;GAEG;AACH,SAAS,iBAAiB,CAAC,QAAgB;IACzC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IAC3C,OAAO,YAAY,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;AACzC,CAAC;AAED,gFAAgF;AAChF,8BAA8B;AAC9B,gFAAgF;AAEhF,MAAM,CAAC,MAAM,eAAe,GAAW,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAEtE,oDAAoD;AACpD,MAAM,CAAC,MAAM,qBAAqB,GAChC,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;AAE1C,gCAAgC;AAChC,MAAM,CAAC,MAAM,yBAAyB,GAAG,qBAAqB,CAAC;AAE/D,2DAA2D;AAC3D,MAAM,CAAC,MAAM,wBAAwB,GACnC,iBAAiB,CAAC,eAAe,CAAC,CAAC;AAErC,gFAAgF;AAChF,0DAA0D;AAC1D,wEAAwE;AACxE,gFAAgF;AAEhF,uCAAuC;AACvC,MAAM,CAAC,MAAM,mBAAmB,GAAW,iBAAiB,CAC1D,2BAA2B,CAC5B,CAAC;AACF,MAAM,CAAC,MAAM,gCAAgC,GAAW,iBAAiB,CACvE,yCAAyC,CAC1C,CAAC;AACF,MAAM,CAAC,MAAM,gCAAgC,GAAW,iBAAiB,CACvE,yCAAyC,CAC1C,CAAC;AACF,MAAM,CAAC,MAAM,+BAA+B,GAAW,iBAAiB,CACtE,wCAAwC,CACzC,CAAC;AACF,MAAM,CAAC,MAAM,+BAA+B,GAAW,iBAAiB,CACtE,wCAAwC,CACzC,CAAC;AACF,MAAM,CAAC,MAAM,2BAA2B,GAAW,iBAAiB,CAClE,oCAAoC,CACrC,CAAC;AAEF,wCAAwC;AACxC,MAAM,CAAC,MAAM,oBAAoB,GAAW,iBAAiB,CAC3D,4BAA4B,CAC7B,CAAC;AACF,MAAM,CAAC,MAAM,iCAAiC,GAAW,iBAAiB,CACxE,0CAA0C,CAC3C,CAAC;AACF,MAAM,CAAC,MAAM,yBAAyB,GAAW,iBAAiB,CAChE,kCAAkC,CACnC,CAAC;AACF,MAAM,CAAC,MAAM,6BAA6B,GAAW,iBAAiB,CACpE,sCAAsC,CACvC,CAAC;AACF,MAAM,CAAC,MAAM,kCAAkC,GAAW,iBAAiB,CACzE,2CAA2C,CAC5C,CAAC;AACF,MAAM,CAAC,MAAM,gCAAgC,GAAW,iBAAiB,CACvE,yCAAyC,CAC1C,CAAC;AACF,MAAM,CAAC,MAAM,8BAA8B,GAAW,iBAAiB,CACrE,uCAAuC,CACxC,CAAC;AAEF,mBAAmB;AACnB,MAAM,CAAC,MAAM,kBAAkB,GAAW,iBAAiB,CACzD,0BAA0B,CAC3B,CAAC;AACF,MAAM,CAAC,MAAM,oCAAoC,GAAW,iBAAiB,CAC3E,+CAA+C,CAChD,CAAC;AACF,MAAM,CAAC,MAAM,mCAAmC,GAAW,iBAAiB,CAC1E,8CAA8C,CAC/C,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/templates/markdown/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClD,MAAM,SAAS,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;AAEtC;;GAEG;AACH,SAAS,iBAAiB,CAAC,QAAgB;IACzC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IAC3C,OAAO,YAAY,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;AACzC,CAAC;AAED,gFAAgF;AAChF,8BAA8B;AAC9B,gFAAgF;AAEhF,MAAM,CAAC,MAAM,eAAe,GAAW,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAEtE,oDAAoD;AACpD,MAAM,CAAC,MAAM,qBAAqB,GAChC,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;AAE1C,gCAAgC;AAChC,MAAM,CAAC,MAAM,yBAAyB,GAAG,qBAAqB,CAAC;AAE/D,2DAA2D;AAC3D,MAAM,CAAC,MAAM,wBAAwB,GACnC,iBAAiB,CAAC,eAAe,CAAC,CAAC;AAErC,gFAAgF;AAChF,0DAA0D;AAC1D,wEAAwE;AACxE,gFAAgF;AAEhF,uCAAuC;AACvC,MAAM,CAAC,MAAM,mBAAmB,GAAW,iBAAiB,CAC1D,2BAA2B,CAC5B,CAAC;AACF,MAAM,CAAC,MAAM,gCAAgC,GAAW,iBAAiB,CACvE,yCAAyC,CAC1C,CAAC;AACF,MAAM,CAAC,MAAM,gCAAgC,GAAW,iBAAiB,CACvE,yCAAyC,CAC1C,CAAC;AACF,MAAM,CAAC,MAAM,+BAA+B,GAAW,iBAAiB,CACtE,wCAAwC,CACzC,CAAC;AACF,MAAM,CAAC,MAAM,+BAA+B,GAAW,iBAAiB,CACtE,wCAAwC,CACzC,CAAC;AACF,MAAM,CAAC,MAAM,2BAA2B,GAAW,iBAAiB,CAClE,oCAAoC,CACrC,CAAC;AAEF,wCAAwC;AACxC,MAAM,CAAC,MAAM,oBAAoB,GAAW,iBAAiB,CAC3D,4BAA4B,CAC7B,CAAC;AACF,MAAM,CAAC,MAAM,iCAAiC,GAAW,iBAAiB,CACxE,0CAA0C,CAC3C,CAAC;AACF,MAAM,CAAC,MAAM,yBAAyB,GAAW,iBAAiB,CAChE,kCAAkC,CACnC,CAAC;AACF,MAAM,CAAC,MAAM,6BAA6B,GAAW,iBAAiB,CACpE,sCAAsC,CACvC,CAAC;AACF,MAAM,CAAC,MAAM,kCAAkC,GAAW,iBAAiB,CACzE,2CAA2C,CAC5C,CAAC;AACF,MAAM,CAAC,MAAM,gCAAgC,GAAW,iBAAiB,CACvE,yCAAyC,CAC1C,CAAC;AACF,MAAM,CAAC,MAAM,8BAA8B,GAAW,iBAAiB,CACrE,uCAAuC,CACxC,CAAC;AACF,MAAM,CAAC,MAAM,2BAA2B,GAAW,iBAAiB,CAClE,oCAAoC,CACrC,CAAC;AAEF,mBAAmB;AACnB,MAAM,CAAC,MAAM,kBAAkB,GAAW,iBAAiB,CACzD,0BAA0B,CAC3B,CAAC;AACF,MAAM,CAAC,MAAM,oCAAoC,GAAW,iBAAiB,CAC3E,+CAA+C,CAChD,CAAC;AACF,MAAM,CAAC,MAAM,mCAAmC,GAAW,iBAAiB,CAC1E,8CAA8C,CAC/C,CAAC"}

package/dist/templates/markdown/spec/frontend/design-system.md.txt

@@ -0,0 +1,68 @@
+# Design System
+
+> What the UI is made of in this project: the visual rules every screen follows.
+
+---
+
+## Overview
+
+<!--
+Document the visual rules your screens actually follow. Code conventions
+(how styles are applied, where components live) belong in
+component-guidelines.md; this file is about what things look like.
+
+Questions to answer:
+- Where are the design tokens defined (theme file, CSS variables, Tailwind config)?
+- Which values are allowed, and which are off-limits?
+- Which shared components must be used instead of building a new one?
+-->
+
+(To be filled by the team)
+
+---
+
+## Color Roles
+
+<!-- Each color and what it is for: text, background, primary action, selection, status. Hex values or token names. -->
+
+(To be filled by the team)
+
+---
+
+## Typography Scale
+
+<!-- Font families, the size and weight for each text role (title, body, caption, label, data), line heights -->
+
+(To be filled by the team)
+
+---
+
+## Spacing, Radius and Elevation
+
+<!-- The spacing scale, corner radii, shadow levels, and when each is used -->
+
+(To be filled by the team)
+
+---
+
+## Key Components
+
+<!-- How buttons, inputs, tables, dialogs and other shared components look, with their variants and states -->
+
+(To be filled by the team)
+
+---
+
+## Icons and Imagery
+
+<!-- Which icon set, stroke width and size; rules for illustrations and photos -->
+
+(To be filled by the team)
+
+---
+
+## Common Mistakes
+
+<!-- Visual inconsistencies your team has shipped: off-scale colors, one-off buttons, cramped mobile layouts -->
+
+(To be filled by the team)

package/dist/templates/markdown/spec/frontend/index.md.txt

@@ -16,6 +16,7 @@ This directory contains guidelines for frontend development. Fill in each file w
 |-------|-------------|--------|
 | [Directory Structure](./directory-structure.md) | Module organization and file layout | To fill |
 | [Component Guidelines](./component-guidelines.md) | Component patterns, props, composition | To fill |
+| [Design System](./design-system.md) | Color roles, type scale, spacing, key component looks | To fill |
 | [Hook Guidelines](./hook-guidelines.md) | Custom hooks, data fetching patterns | To fill |
 | [State Management](./state-management.md) | Local state, global state, server state | To fill |
 | [Quality Guidelines](./quality-guidelines.md) | Code standards, forbidden patterns | To fill |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chinhae/atw-cli",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "A Team Workflow — an AI coding workflow framework that encodes your team's conventions into the process",
   "type": "module",
   "main": "./dist/index.js",
@@ -33,7 +33,7 @@
     "inquirer": "^9.3.7",
     "undici": "^6.21.0",
     "zod": "^4.4.2",
-    "@chinhae/atw-core": "0.2.7"
+    "@chinhae/atw-core": "0.2.9"
   },
   "devDependencies": {
     "@eslint/js": "^9.18.0",