kkk-design

name	kkk-design
description	可复用的固定画布截图视觉设计 skill，覆盖克制内容卡片与弥散信息海报两套系统，用于设计或审查静态分享卡、媒体信息板、状态提示、数据报告和行动焦点页。

KKK Design

使用场景

当任务需要产出“可截图传播”的固定画布视觉时使用本 skill：静态信息板、分享卡、媒体摘要、状态提示、数据报告、二维码/行动焦点页、列表看板、长图式说明页等。

目标不是做常规网页、后台表单或营销落地页，而是做一张完成度高、层级清晰、缩略图也能读出主题的信息画布。

两套系统

先判断信息气质，再选系统。

• 克制内容卡片系统：适合密集文本、人物/账号信息、媒体封面、回复树、时间线、轻量统计、列表与详情卡。特征是浅层背景、清晰头像列、圆角媒体块、较少装饰、可读性优先。
• 弥散信息海报系统：适合强主题、强状态、报告感、风险提示、行动中心、QR 焦点、排行榜、图表大屏。特征是固定大画布、多层光斑、噪点、巨型标题、玻璃面板、技术化装饰和情绪色。

不要把两套系统混乱叠加。内容卡片可以少量使用柔光和阴影；信息海报可以承载密集数据，但必须保持大块分区和明显视觉中心。

工作流程

1. 先压缩主信息：这张图让人第一眼记住什么。
2. 选择系统：读 references/design-systems.md 中对应章节。
3. 定画布、留白、字号和色彩：读 references/tokens.md。
4. 选择版式：读 references/layout-recipes.md。
5. 组装局部组件：读 references/components.md。
6. 需要代码起点时参考 examples/clean-card.tsx 或 examples/diffuse-poster.tsx。
7. 交付前用 examples/review-checklist.md 自检。

硬性约束

• 默认以 1440px 宽固定画布思考；高度由信息量决定，但必须像一张完整图片，不像滚动网页截取的一段。
• 主标题、关键数字、核心媒体或 QR 必须至少有一个成为第一视觉中心。
• 所有文字必须在最终截图尺寸可读；长文本要换行、限行、分块，不要缩到像脚注。
• 背景、装饰和动效只服务主题，不抢正文。
• 浅色/深色主题要保持同一情绪，不要换成两套完全不同的画面。
• 保持技术感和秩序感：英文标签、等宽数字、状态灯、线条、点阵、角标、图表都可以用，但不能可爱化或贴纸化。

明确避免

• 普通管理后台：小卡片网格、表格、按钮、筛选器堆满画面。
• 营销首屏：大 slogan 配装饰插画，信息密度不足。
• 单调纯色：没有空间感、光感、纹理或层级。
• 彩虹混搭：一页多个互相竞争的主色。
• 过度拟物或过度毛玻璃：样式抢走内容。
• 把具体业务名称、平台名称或项目内部函数写进通用设计规则；规则必须能迁移到别的项目。

参考文件

• references/design-systems.md：两套视觉系统的详细规则。
• references/tokens.md：画布、字号、间距、圆角、阴影、噪点和颜色参数。
• references/layout-recipes.md：常用构图配方。
• references/components.md：头像、徽章、媒体、统计、QR、图表、装饰等组件规则。
• examples/clean-card.tsx：克制内容卡片示例。
• examples/diffuse-poster.tsx：弥散信息海报示例。
• examples/review-checklist.md：交付前检查清单。