compact-landing

精简式落地页

打造一个小巧、完整的产品世界，而非通用营销模板。保持精简清晰；针对每款产品重新构思可见的设计语言。

工作流

1. 检查产品、提供的内容、当前技术栈和现有设计语言。复用已安装的工具和组件。
2. 首先询问按钮尺寸——紧凑、中号还是大号——除非用户已经回答或要求你自行选择。
3. 只有当答案会实质性影响结果时，才提出最多两个因情况而定的问题。适合询问的主题：品牌氛围、内容深度、圆角风格或动效程度。
4. 编码前创建设计指纹。如果此技能包含脚本且 Node 可用，请运行 node scripts/pick-direction.mjs。否则，从 references/style-dna.md 中选择，不要总是选择每个列表中的第一项。
5. 根据产品含义调整设计指纹。将选择器的输出视为创意约束，而非要求你做出不协调选择的指令。
6. 找出一个产品原生的标志性产物：真实演示、可视化输出、交互式示例、对比、迷你工作流、数据样本或实用控件。它比装饰元素更能塑造产品身份。
7. 实现最小但完整的页面。优先使用 HTML/CSS 和现有依赖。只有在页面确实需要交互行为时才添加 JavaScript。
8. 验证移动端布局、键盘焦点、减少动态效果设置、动态状态稳定性，以及实际的主要操作。

如果用户希望立即执行，请自行选择按钮尺寸和设计指纹。不要停下来先提问。

设计指纹

实施前先定义以下维度：

• 构图： 现场记录、偏移侧栏、对开小册子、嵌框控制台、紧凑目录、堆叠样本，或其他符合产品特点的轮廓。
• 尺寸： 选择合适的紧凑宽度，通常为 420-720px；不要每次都默认使用 440px。
• 配色： 暖纸色、冷雾色、单色墨色、深炭色、产品主题色，或轻快明亮色。
• 字体： grotesk + 等宽字体、人文主义无衬线 + 等宽字体、编辑风衬线 + 无衬线、圆角无衬线 + 等宽字体、窄体 + 无衬线，或有意采用全等宽字体。
• 几何： 锐利、精密机械感、平衡、友好、柔和，或混合／同心圆角。
• 表面语法： 留白、平面分隔线、内嵌细线、层叠圆环、色调面板、纸面分隔线，或技术边框。选择一种主导语法。
• 主题元素： emoji 点缀、ASCII 符号、索引、印章、涂鸦、彩色圆点、微型物件图标，或不使用。
• 动效： 选择一种入场行为和一到两种交互行为。

变化必须改变首屏的整体轮廓，而不只是颜色或标签。至少要有四个维度不同于旧的标准方案：居中的 440px 栏、白色／锌灰中性色、Geist + Geist Mono、6-10px 圆角、内嵌细线卡片、Instrument Serif、交错上升动效。

不要独立地随机选择组件。先确定统一的美术方向，再据此推导设计令牌。只使用一两个出人意料的细节；在页面内重复运用，形成一致性。

阅读 references/style-dna.md，了解兼容范围、设计方向类别、动效模式和检查项。

不变要求

• 保持页面的范围和信息密度精简，即使画布更宽或采用分栏布局也不例外。
• 将主要操作放在首屏内。只有这样能减少操作阻力时才重复显示。
• 使用清晰的字体层级、具体文案和足够的对比度。
• 使用真实的产品内容。避免虚构指标、含糊宣传、填充式推荐语和装饰性仪表盘。
• 将视觉上很小的控件的可点击区域扩展至至少 40px，但不要让它们看起来过大。
• 显示可见的 :focus-visible 状态，并保留语义化 HTML。
• 对变化的数字使用等宽数字。
• 遵循 prefers-reduced-motion，并确保减少动效后的体验仍然完全可用。
• 对于 CSS 或当前技术栈可以实现的小效果，绝不要添加新的依赖。

零位移动态效果

• 仅为 transform、opacity 和 filter 添加动画。切勿使用 transition: all。
• 在动画开始前预留尺寸：固定高度或最小高度、媒体内容使用 aspect-ratio、固定图标槽位、宽度锁定的动态标签，以及等宽数字。
• 将备用标签、图标、标签页和面板叠放在同一网格区域或固定尺寸的容器中。不要将延迟显示的内容插入文档流。
• 在悬停和状态变化时，保持内边距、边框、字号、字重、行高、网格轨道和弹性布局尺寸稳定。
• 开关、抽屉、轨迹和装饰性动态效果优先使用变换。将装饰性粒子绝对定位，使其不会影响文档流。
• 条件允许时自行托管字体。否则使用字宽兼容的后备字体，并避免在字体加载时隐藏页面。
• 将仅悬停时生效的效果限制在 (hover: hover) and (pointer: fine) 条件下。

按钮

始终使用统一的尺寸标准：

• **紧凑型：**视觉高度 24-28px，标签字号 11-12px。
• **中型：**视觉高度 32-36px，标签字号 12.5-13px。
• **大型：**视觉高度 40-44px，标签字号 13.5-14px。

按下反馈使用 scale(0.96)。宽型命令控件使用 0.98。在复制、加载和成功状态下，保持标签和图标槽位稳定。

对于 llms.txt 或助手复制操作，只有在产品需要时才使用小型等宽字体按钮。复用项目的图标系统或 CSS 字符；不要在技能输出中嵌入 SVG 示例。

有目的的个性

表情符号适合产品风格时可以使用。将 1-3 个表情符号用作标点、标签、小型贴纸或状态提示，而不是结构或图标的替代品。为其预留空间，避免不同平台的字形差异导致布局移动。

色彩可以活泼、暗沉、具有编辑感或带有产品特色。为每种强调色指定用途并重复使用。避免默认的紫蓝色 AI 渐变、失控的彩虹配色和随机的装饰色彩。

动态效果应说明状态、吸引注意力或体现产品隐喻。固定尺寸的轨迹、环境漂浮标记、槽位切换、裁剪显现或状态色彩过渡，都能让界面显得鲜活而不触发布局重排。避免让所有元素都持续运动。

避免

• 在无关产品之间重复使用相同的分区顺序、窄版布局、配色方案、圆角风格或组件集。
• 下意识地使用通用的超大主视觉、三个等宽功能卡片、徽章云和功能网格。
• 除非产品确实需要，否则不要照搬 Cuelume 的波形、奶油色调色板、三枚彩纸屑或精确布局。
• 不要将所有表面都做成卡片，也不要将所有控件都做成药丸形。
• 避免使用会与主要操作争夺注意力的装饰性动画。
• 避免为透明度、变换、标签页、计数器或简单显现效果使用大型动画库。

最终检查

• 编写代码前已确定设计特征；至少有四个高显著度维度不同于标准方案。
• 产品原生的标志性元素清晰可见且实用。
• 首屏视口具有鲜明轮廓，并有清晰的主要操作。
• 圆角、配色、字体、表面、主题元素和动态效果构成统一的设计方向。
• 移动端能整洁地变为单列布局，且没有水平溢出。
• 动态内容、媒体、图标、标签和面板均已预留布局空间。
• 键盘操作、焦点、对比度、触控目标和减少动态效果设置均正常。
• 按照项目现有的验证流程，构建和主要交互均通过。