cofounder-frontend-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

此技能指导创建特色鲜明的生产级前端界面，避免千篇一律的“AI流水线”审美风格。实现可实际运行的代码，同时格外注重审美细节与创意选择。

用户会提供前端需求：需要构建的组件、页面、应用或界面。他们可能会附带关于用途、受众或技术限制的上下文信息。

Design Thinking

设计思路

Before coding, understand the context and commit to a BOLD aesthetic direction:

Purpose: What problem does this interface solve? Who uses it?
Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
Constraints: Technical requirements (framework, performance, accessibility).
Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?

CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:

Production-grade and functional
Visually striking and memorable
Cohesive with a clear aesthetic point-of-view
Meticulously refined in every detail

编码前，先理解上下文并确定一个明确的审美方向：

用途：该界面解决什么问题？面向哪些用户？
风格基调：选择一种极致风格：极简主义、极繁主义混乱、复古未来主义、有机自然风、奢华精致风、趣味玩具风、杂志排版风、粗野原始风、装饰艺术几何风、柔和马卡龙风、工业实用风等。可选风格种类繁多，可以这些为灵感，但要设计出贴合选定审美方向的方案。
限制条件：技术要求（框架、性能、可访问性）。
差异化：什么让这个界面令人过目不忘？用户会记住的核心亮点是什么？

关键原则：选择清晰的概念方向并精准执行。大胆的极繁主义和精致的极简主义都可行——核心在于设计的目的性，而非风格强度。

随后实现可运行的代码（HTML/CSS/JS、React、Vue等），需满足：

生产级标准且功能完整
视觉冲击力强、令人难忘
风格统一，审美观点明确
每一处细节都经过精心打磨

Frontend Aesthetics Guidelines

前端审美指南

Focus on:

Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
Spacing & Rhythm: Maintain consistent spacing between elements as a non-negotiable foundation. Use Tailwind's spacing scale (
```
p-
```
,
```
m-
```
,
```
gap-
```
,
```
space-y-
```
,
```
space-x-
```
) systematically. Every container needs appropriate padding. Every list of items needs consistent gaps. Every section needs breathing room from its neighbors. Creative layouts are built ON TOP of solid spacing fundamentals — never sacrifice padding and margins for aesthetic experimentation. When customizing or overriding component styles, explicitly preserve or intentionally adjust spacing rather than letting it collapse to zero.
Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

重点关注以下方面：

排版：选择美观、独特且有特色的字体。避免Arial、Inter这类通用字体；转而选用能提升前端美感的独特字体；意料之外、富有个性的字体选择。将独特的标题字体与精致的正文字体搭配使用。
色彩与主题：坚持统一的审美风格。使用CSS变量保证一致性。主色调搭配鲜明的强调色，效果优于平淡、均匀分布的配色方案。
动效：将动画用于特效和微交互。优先为HTML选择纯CSS解决方案。在React环境中优先使用Motion库。聚焦高影响力场景：一次精心编排的页面加载动画（配合animation-delay实现 staggered reveals），比零散的微交互更能带来愉悦感。使用滚动触发和令人惊喜的悬停状态。
空间构图：打破常规的布局设计。不对称、元素重叠、斜向流动、突破网格的元素、充足的留白或可控的密度。
间距与韵律：将元素间的一致间距作为不可动摇的基础。系统地使用Tailwind的间距刻度（
```
p-
```
、
```
m-
```
、
```
gap-
```
、
```
space-y-
```
、
```
space-x-
```
）。每个容器都需要合适的内边距。每个列表项都需要一致的间距。每个区块都需要与相邻区块保持呼吸空间。创意布局建立在扎实的间距基础之上——绝不能为了审美实验牺牲内边距和外边距。自定义或覆盖组件样式时，要明确保留或有意调整间距，而非让间距归零。
背景与视觉细节：营造氛围和层次感，而非默认使用纯色。添加符合整体审美风格的上下文特效和纹理。运用创意形式，如渐变网格、噪点纹理、几何图案、分层透明效果、夸张阴影、装饰性边框、自定义光标和颗粒叠加层。

Light/Dark Mode System

明暗模式系统

Two observations to keep in mind:

Design both modes intentionally. Dark mode is not "invert the colors." Each mode must have its own curated palette — background tones, text contrast, accent vibrancy, shadow depth, and border opacity all shift independently. A dark theme that simply swaps white for black looks washed out and lifeless. Design each mode as a first-class experience with its own personality.
Use CSS custom properties as the single source of truth. Define all color tokens as
```
--color-*
```
variables on
```
:root
```
(light) and
```
[data-theme="dark"]
```
(or
```
.dark
```
). Components should never reference raw color values — only variables. This makes theming a one-place change and keeps both modes perfectly in sync. Offer three toggle states — Light, Dark, and System — where System (the default) follows the OS-wide preference via
```
prefers-color-scheme: dark
```
. Persist the user's choice to
```
localStorage
```
so it survives reloads, but always start with System so the app respects the platform setting out of the box.
With prerendered pages,
data-theme
must be owned by an inline
<head>
script, not by React. Set it in a tiny script that runs before paint, keep the attribute out of React-rendered JSX, and add
```
suppressHydrationWarning
```
to
```
<html>
```
. Prerendered HTML bakes one value at build time — letting React render the attribute causes hydration mismatches and a theme flash.

需牢记两点：

为两种模式进行针对性设计。 深色模式不是“反转颜色”。每种模式都要有自己精心调配的配色方案——背景色调、文本对比度、强调色饱和度、阴影深度和边框透明度都要独立调整。简单将白色替换为黑色的深色主题会显得苍白无力。要将每种模式都作为一等体验来设计，赋予其独特的个性。
使用CSS自定义属性作为唯一的数据源。 在
```
:root
```
（浅色模式）和
```
[data-theme="dark"]
```
（或
```
.dark
```
）上定义所有颜色变量
```
--color-*
```
。组件绝不能直接引用原始颜色值——只能引用变量。这样主题修改只需在一处进行，并确保两种模式完全同步。提供三种切换状态——浅色、深色和系统默认，其中系统默认（默认选项）通过
```
prefers-color-scheme: dark
```
跟随系统全局偏好。将用户的选择保存到
```
localStorage
```
，使其在页面刷新后依然生效，但初始状态始终设为系统默认，确保应用开箱即可尊重平台设置。
对于预渲染页面，
data-theme
必须由
<head>
内的内联脚本控制，而非React。在页面绘制前运行一段小型脚本设置该属性，不要让React渲染的JSX包含此属性，并在
```
<html>
```
标签上添加
```
suppressHydrationWarning
```
。预渲染HTML在构建时会固化一个值——让React渲染该属性会导致 hydration 不匹配和主题闪烁问题。

Interaction Feedback

交互反馈

Always provide visual feedback for operations. Every user action that triggers processing must have a visible response — a button that saves without closing the dialog should show a brief success state (checkmark, color flash, toast notification, or subtle pulse). Silent success is indistinguishable from a broken button. Match the feedback weight to the action weight: a destructive delete deserves a more emphatic confirmation than a routine save.
Use cursor styles to signal interactivity. Set
```
cursor: pointer
```
on all clickable elements (buttons, links, cards, toggles, tabs). Use
```
cursor: not-allowed
```
on disabled elements and
```
cursor: grab
```
/
```
cursor: grabbing
```
on draggable items. The cursor is the user's first hint that an element is actionable — if it stays as the default arrow, the affordance is invisible.

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

Favicon

网站图标（Favicon）

Always generate a custom favicon for the app — do not reuse the Vite default (

vite.svg

). Design it as part of the brand identity — it should echo the chosen aesthetic direction (color palette, visual motifs, overall tone). Keep the shape simple and recognizable at 16×16px.

Deliver it as an inline SVG data URI in the

href

<link rel="icon">

. Do not create a separate file in

public/

. In a cofounder app (React Router framework mode — there is no

index.html

), declare it via the

links

export in

app/root.tsx

tsx

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>" },
];

In a standalone HTML page, the same

<link>

goes directly in the

<head>

html

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

Use

%23

in place of

for hex colors —

has special meaning in URLs and will break the data URI silently.

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.

Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.

IMPORTANT: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.

Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

始终为应用生成自定义Favicon——绝对不要重复使用Vite的默认图标（

vite.svg

）。将其作为品牌标识的一部分进行设计——要呼应选定的审美方向（配色方案、视觉元素、整体基调）。保持图标形状简洁，在16×16px尺寸下依然清晰可辨。

将其作为内联SVG数据URI放在

<link rel="icon">

的

href

中。不要在

public/

目录下创建单独的文件。在联合创始人应用（React Router框架模式——没有

index.html

）中，通过

app/root.tsx

中的

links

导出声明：

tsx

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>

中：

html

<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）。

重要提示：实现复杂度要与审美愿景匹配。极繁主义设计需要包含大量动画和特效的复杂代码。极简主义或精致风格的设计则需要克制、精准，并注重间距、排版和细微细节。优雅源于对愿景的完美执行。