cofounder-frontend-design

此技能旨在指导你打造独特且达到生产级水准的前端界面，避免千篇一律的“AI 垃圾感”审美。编写真正可用的代码，并对美学细节和创意选择给予格外关注。

用户会提供前端需求：要构建的组件、页面、应用或界面。他们可能还会补充用途、受众或技术限制等背景信息。

设计思路

开始编写代码前，先理解背景，并确定一个大胆鲜明的美学方向：

• 用途：这个界面要解决什么问题？谁会使用它？
• 基调：选择一种极致风格：极简主义、极繁主义混沌风、复古未来主义、有机自然风、奢华精致风、玩具般的趣味风、编辑部／杂志风、粗野原始风、装饰艺术／几何风、柔和粉彩风、工业实用风等。可选的风格多种多样。可以从中汲取灵感，但设计要忠于所选的美学方向。
• 限制：技术要求（框架、性能、无障碍访问）。
• 差异化：有什么能让人过目不忘？人们会记住的亮点是什么？

至关重要：确定清晰的概念方向，并精准贯彻。大胆的极繁主义和考究的极简主义都能奏效——关键在于用心，而非强度。

接着编写可用的代码（HTML/CSS/JS、React、Vue 等），确保其：

• 达到生产级水准且功能完善
• 视觉出众，令人印象深刻
• 风格统一，审美立场清晰
• 每个细节都经过精心打磨

前端美学指南

重点关注：

• 排版：选择优美、独特且富有趣味的字体。避免 Arial 和 Inter 等通用字体，改用能提升前端美感的鲜明字体；选择出人意料、个性十足的字体。将独特的展示字体与精致的正文字体搭配使用。
• 色彩与主题：坚持统一的美学风格。使用 CSS 变量确保一致性。与其使用拘谨、均匀分布的配色，不如采用主导色搭配鲜明的强调色。
• 动效：使用动画呈现效果和微交互。HTML 优先采用纯 CSS 方案；React 项目可用时使用 Motion 库。聚焦高影响力时刻：通过错开显示（animation-delay）精心编排一次完整的页面加载动画，比零散的微交互更能带来惊喜。设计能带来意外之喜的滚动触发效果和悬停状态。
• 空间构图：尝试出人意料的布局、不对称、重叠、对角线动线和突破网格的元素。留出充足的负空间，或采用有节制的紧凑布局。
• 间距与节奏：元素之间的间距必须保持一致，这是不可妥协的基础。系统地使用 Tailwind 的间距比例（p-、m-、gap-、space-y-、space-x-）。每个容器都需要适当的内边距，每组列表项都需要一致的间距，每个区块与相邻区块之间都应留有呼吸空间。创意布局建立在扎实的间距基础之上——绝不能为了美学实验而牺牲内边距和外边距。自定义或覆盖组件样式时，应明确保留或有意调整间距，不要任其缩减至零。
• 背景与视觉细节：营造氛围和层次，不要默认使用纯色。添加符合整体美学风格的效果和纹理。可以创造性地运用渐变网格、噪点纹理、几何图案、分层透明效果、戏剧化阴影、装饰边框、自定义光标和颗粒叠加效果。

浅色/深色模式系统

请牢记以下两点：

1. 有意识地设计两种模式。 深色模式不是“反转颜色”。每种模式都必须有自己精心调配的调色板——背景色调、文本对比度、强调色的鲜明度、阴影深度和边框不透明度都应各自调整。仅仅把白色换成黑色的深色主题会显得暗淡无生气。应将每种模式都视为完整的一流体验，赋予其独特个性。
2. 使用 CSS 自定义属性作为唯一事实来源。 在 :root（浅色模式）和 [data-theme="dark"]（或 .dark）上将所有颜色令牌定义为 --color-* 变量。组件不应直接引用原始颜色值，只能使用变量。这样只需在一处修改主题，就能让两种模式始终保持同步。提供三种切换状态——Light、Dark 和 System——其中 System（默认值）通过 prefers-color-scheme: dark 跟随操作系统的偏好设置。将用户的选择保存到 localStorage，使其在重新加载后仍然有效，但始终默认使用 System，以便应用开箱即用地遵循平台设置。
3. 对于预渲染页面，data-theme 必须由内联 <head> 脚本管理，而不能由 React 管理。 在绘制前运行的一段简短脚本中设置该属性，不要在 React 渲染的 JSX 中包含此属性，并为 <html> 添加 suppressHydrationWarning。预渲染的 HTML 会在构建时写入一个固定值——让 React 渲染此属性会导致水合不匹配和主题闪烁。

交互反馈

• 始终为操作提供视觉反馈。 每个会触发处理的用户操作都必须有可见响应——例如，点击保存后不会关闭对话框的按钮，应显示短暂的成功状态（对勾、颜色闪烁、Toast 通知或轻微脉冲）。静默成功无法与按钮失灵区分。反馈的强度应与操作的重要性相匹配：具有破坏性的删除操作应比常规保存提供更醒目的确认反馈。
• 使用光标样式提示可交互性。 为所有可点击元素（按钮、链接、卡片、切换控件、标签页）设置 cursor: pointer。为禁用元素使用 cursor: not-allowed，为可拖动项使用 cursor: grab/cursor: grabbing。光标是用户判断元素是否可操作的第一个提示——如果它仍是默认箭头，交互提示就不可见。

网站图标

始终为应用生成自定义网站图标——不要重复使用 Vite 默认图标（vite.svg）。将其设计为品牌标识的一部分——应呼应所选的美学方向（调色板、视觉元素、整体基调）。保持形状简洁，并确保在 16×16px 尺寸下清晰易辨。

将其作为内联 SVG 数据 URI放在 <link rel="icon"> 的 href 中。不要在 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> 中：

<link 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>">

十六进制颜色中的 # 要替换为 %23——# 在 URL 中有特殊含义，否则会导致数据 URI 静默失效。

绝不要采用千篇一律的 AI 生成美学，例如过度使用的字体系列（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（尤其是白色背景上的紫色渐变）、模式化的布局和组件设计，以及缺乏情境特色的模板化设计。

要发挥创意，做出出人意料、真正经过设计的选择，让设计与具体情境相契合。每个设计都应独一无二。在浅色和深色主题、不同字体和不同美学风格之间灵活变化。绝不要在不同生成结果中趋同于常见选择（例如 Space Grotesk）。

重要：让实现复杂度与美学愿景相匹配。极繁主义设计需要精巧的代码，搭配丰富的动画和效果。极简或精致的设计则需要克制、精准，并仔细留意间距、排版和细节。优雅源于出色地实现愿景。

请记住：Claude 能够创作非凡的作品。不要有所保留，尽情展现跳出常规思考并全心投入独特愿景后，真正能够创造出什么。