cofounder-frontend-design

该技能用于指导创建独特、生产级的前端界面，避免通用的“AI slop”美学风格，并用真正可运行的代码实现，特别注重美学细节与创意选择。

用户提供前端需求：要构建的组件、页面、应用或界面，可能包含关于用途、受众或技术约束的背景信息。

设计思考

在编码前，先理解上下文并确定一个大胆的美学方向：

目的：这个界面解决什么问题？谁在使用它？
基调：选择一个极端方向：极度极简、极繁混乱、复古未来主义、有机自然、奢华精致、俏皮玩具感、编辑杂志风、粗野原始、装饰几何、柔和粉彩、工业实用等。选择很多，可从中获得灵感，但最终要设计出真正忠于所选美学方向的作品。
约束：技术要求（框架、性能、可访问性）。
差异化：什么让它令人难忘？哪一点会被人记住？

关键：选择明确的概念方向并精准执行。大胆极繁和精致极简都可行——关键在于有意为之，而不是强度。

然后实现可运行代码（HTML/CSS/JS、React、Vue 等），要求：

生产级且可用
视觉上醒目且令人难忘
具有清晰美学观点并保持一致
每个细节都精雕细琢

前端美学指南

重点关注：

字体排版：选择美观、独特、有趣的字体。避免 Arial、Inter 等通用字体；选择能提升前端美学的独特字体，具有意外感和个性。将独特的展示字体与精致的正文字体搭配。
颜色与主题：坚持统一的美学。使用 CSS 变量保持一致性。主色搭配锐利点缀色，优于胆怯、均匀分布的调色板。
动效：用动画实现效果与微交互。HTML 优先使用纯 CSS 方案。React 可用时使用 Motion 库。聚焦高影响时刻：一次精心编排、带交错揭示（animation-delay）的页面加载，比零散的微交互更令人愉悦。使用滚动触发和令人惊喜的悬停状态。
空间构图：意外的布局。不对称。重叠。对角线流动。打破网格的元素。大量留白或受控密度。
间距与节奏：保持元素间距一致，这是不可妥协的基础。系统化使用 Tailwind 间距尺度（p-、m-、gap-、space-y-、space-x-）。每个容器需要合适内边距，每个列表项需要一致间距，每个区块需要与相邻区块留出呼吸空间。创意布局建立在扎实间距基础之上——绝不要为了美学实验牺牲 padding 和 margin。自定义或覆盖组件样式时，应明确保留或有意调整间距，而不是让它塌缩为零。
背景与视觉细节：营造氛围与深度，而非默认纯色。添加与整体美学匹配的上下文效果和纹理。运用渐变网格、噪点纹理、几何图案、分层透明、戏剧性阴影、装饰边框、自定义光标、颗粒叠加等创意形式。

明暗模式系统

需牢记两点：

两种模式都要有意设计。暗色模式不是“反转颜色”。每种模式都要有各自精心策划的调色板——背景色调、文字对比、点缀鲜艳度、阴影深度、边框透明度都会独立变化。简单把白换成黑的暗色主题会显得苍白无生气。要把每种模式设计成具有自身个性的一流体验。
使用 CSS 自定义属性作为唯一事实来源。将所有颜色 token 定义为 :root（亮色）和 [data-theme="dark"]（或 .dark）上的 --color-* 变量。组件绝不应引用原始颜色值——只用变量。这样主题切换只需改一处，并让两种模式完美同步。提供三种切换状态——亮色、暗色和系统，其中系统（默认）通过 prefers-color-scheme: dark 跟随操作系统偏好。将用户选择持久化到 localStorage 以便刷新后保留，但始终以系统为初始值，让应用开箱即用即尊重平台设置。

对于预渲染页面，data-theme 必须由内联 <head> 脚本掌控，而不是 React。用一个小脚本在绘制前运行并设置它，让该属性不进入 React 渲染的 JSX，并在 <html> 上添加 suppressHydrationWarning。预渲染 HTML 在构建时固化一个值——让 React 渲染该属性会导致水合不匹配和主题闪烁。

交互反馈

始终为操作提供视觉反馈。每个触发处理的用户操作都必须有可见响应——一个保存后不关闭对话框的按钮，应显示短暂成功状态（对勾、颜色闪烁、toast 通知或轻微脉冲）。静默成功与坏按钮无法区分。反馈强度应与操作强度匹配：破坏性删除应比常规保存获得更强烈的确认。

使用光标样式提示可交互性。在所有可点击元素（按钮、链接、卡片、开关、标签页）上设置 cursor: pointer。禁用元素使用 cursor: not-allowed，可拖拽项使用 cursor: grab/cursor: grabbing。光标是用户对元素可操作的第一提示——若保持默认箭头，可供性就不可见。

Favicon

始终为应用生成自定义 favicon——不要复用 Vite 默认值（vite.svg）。将其作为品牌识别的一部分来设计——应呼应所选美学方向（调色板、视觉母题、整体基调）。保持形状简单，在 16×16px 下可识别。

以 <link rel="icon"> 的 href 中内联 SVG data URI 的形式交付。不要创建 public/ 中的单独文件。在 cofounder 应用（React Router 框架模式——没有 index.html）中，通过 app/root.tsx 的 links 导出声明：

export const links: Route.LinksFunction = () => [ { rel: "icon", href: "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='7' fill='%23e74c3c'/></svg>" }, ];

在独立 HTML 页面中，同样的 <link> 直接放在 <head> 里：

十六进制颜色中用 %23 代替 #——# 在 URL 中有特殊含义，会静默破坏 data URI。

绝不使用通用的 AI 生成美学，如过度使用的字体族（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（尤其是白底紫色渐变）、可预测的布局与组件模式，以及缺乏上下文特定特征的千篇一律设计。

创造性地诠释，做出真正为上下文设计、令人意外的选择。没有两个设计应相同。在亮暗主题、不同字体、不同美学之间变化。绝不在多次生成中收敛到常见选择（例如 Space Grotesk）。

重要：让实现复杂度与美学愿景匹配。极繁设计需要精细代码、大量动画和效果。极简或精致设计需要克制、精确，并仔细关注间距、字体与微妙细节。优雅来自对愿景的良好执行。

记住：Claude 有能力完成非凡的创意工作。不要保留，展示跳出框架并完全投入独特愿景时真正能创造出的东西。

技能介绍