Back to Details

frontend-skill

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Frontend Skill

前端技能

Use this skill when the quality of the work depends on art direction, hierarchy, restraint, imagery, and motion rather than component count.
Goal: ship interfaces that feel deliberate, premium, and current. Default toward award-level composition: one big idea, strong imagery, sparse copy, rigorous spacing, and a small number of memorable motions.
当工作质量取决于艺术指导、层级结构、克制设计、图像运用和动效，而非组件数量时，使用此技能。
目标：打造具有精心设计感、高品质且符合当下趋势的界面。默认采用获奖级别的构图方式：一个核心创意、醒目的图像、简洁的文案、严谨的间距设计，以及少量令人印象深刻的动效。

Working Model

工作模式

Before building, write three things:
  • visual thesis: one sentence describing mood, material, and energy
  • content plan: hero, support, detail, final CTA
  • interaction thesis: 2-3 motion ideas that change the feel of the page
Each section gets one job, one dominant visual idea, and one primary takeaway or action.
开始构建前，先写下三点内容：
  • 视觉主旨：用一句话描述氛围、材质和活力感
  • 内容规划：首屏英雄区、支撑内容、细节补充、最终行动召唤（CTA）
  • 交互主旨：2-3个能改变页面质感的动效创意
每个区块只承担一项功能、一个核心视觉创意，以及一个主要的信息传递点或行动指令。

Beautiful Defaults

优质默认规范

  • Start with composition, not components.
  • Prefer a full-bleed hero or full-canvas visual anchor.
  • Make the brand or product name the loudest text.
  • Keep copy short enough to scan in seconds.
  • Use whitespace, alignment, scale, cropping, and contrast before adding chrome.
  • Limit the system: two typefaces max, one accent color by default.
  • Default to cardless layouts. Use sections, columns, dividers, lists, and media blocks instead.
  • Treat the first viewport as a poster, not a document.
  • 从构图入手，而非组件。
  • 优先选择全屏英雄区或全画布视觉锚点。
  • 让品牌或产品名称成为最醒目的文本。
  • 文案简短到能在几秒内扫读完。
  • 在添加装饰元素前，先运用留白、对齐、缩放、裁剪和对比度。
  • 限制设计系统：最多使用两种字体，默认仅用一种强调色。
  • 默认采用无卡片布局。改用区块、列、分隔线、列表和媒体块来替代。
  • 将首屏视为海报，而非文档。

Landing Pages

着陆页

Default sequence:
  1. Hero: brand or product, promise, CTA, and one dominant visual
  2. Support: one concrete feature, offer, or proof point
  3. Detail: atmosphere, workflow, product depth, or story
  4. Final CTA: convert, start, visit, or contact
Hero rules:
  • One composition only.
  • Full-bleed image or dominant visual plane.
  • Canonical full-bleed rule: on branded landing pages, the hero itself must run edge-to-edge with no inherited page gutters, framed container, or shared max-width; constrain only the inner text/action column.
  • Brand first, headline second, body third, CTA fourth.
  • No hero cards, stat strips, logo clouds, pill soup, or floating dashboards by default.
  • Keep headlines to roughly 2-3 lines on desktop and readable in one glance on mobile.
  • Keep the text column narrow and anchored to a calm area of the image.
  • All text over imagery must maintain strong contrast and clear tap targets.
If the first viewport still works after removing the image, the image is too weak. If the brand disappears after hiding the nav, the hierarchy is too weak.
Viewport budget:
  • If the first screen includes a sticky/fixed header, that header counts against the hero. The combined header + hero content must fit within the initial viewport at common desktop and mobile sizes.
  • When using 
    100vh
    /
    100svh
    heroes, subtract persistent UI chrome (
    calc(100svh - header-height)
    ) or overlay the header instead of stacking it in normal flow.
默认流程：
  1. 英雄区：品牌/产品、价值主张、CTA，以及一个核心视觉元素
  2. 支撑内容：一个具体的功能、优惠或证明点
  3. 细节补充：氛围展示、工作流程、产品深度或品牌故事
  4. 最终CTA：转化、开始使用、访问或联系
英雄区规则：
  • 仅采用一种构图。
  • 全屏图像或核心视觉平面。
  • 标准全屏规则：在品牌着陆页中，英雄区必须从边缘延伸到边缘，不能继承页面的内边距、框架容器或共享最大宽度；仅限制内部文本/操作列的宽度。
  • 优先级：品牌名称 > 标题 > 正文 > CTA。
  • 默认不使用英雄卡片、数据统计条、Logo云、标签堆或悬浮仪表盘。
  • 标题在桌面端控制在约2-3行，在移动端一眼就能读完。
  • 文本列要窄，并锚定在图像中视觉平静的区域。
  • 图像上的所有文本必须保持高对比度，且点击目标清晰可辨。
如果移除图像后首屏依然可用，说明图像不够有冲击力。如果隐藏导航后品牌消失，说明层级结构太薄弱。
视口预算：
  • 如果首屏包含固定/粘性头部，该头部会占用英雄区的空间。头部+英雄区内容必须适配常见桌面和移动端的初始视口尺寸。
  • 使用
    100vh
    /
    100svh
    英雄区时，要减去持久存在的UI装饰高度（
    calc(100svh - header-height)
    ），或者将头部叠加在英雄区上，而非按正常流堆叠。

Apps

应用程序

Default to Linear-style restraint:
  • calm surface hierarchy
  • strong typography and spacing
  • few colors
  • dense but readable information
  • minimal chrome
  • cards only when the card is the interaction
For app UI, organize around:
  • primary workspace
  • navigation
  • secondary context or inspector
  • one clear accent for action or state
Avoid:
  • dashboard-card mosaics
  • thick borders on every region
  • decorative gradients behind routine product UI
  • multiple competing accent colors
  • ornamental icons that do not improve scanning
If a panel can become plain layout without losing meaning, remove the card treatment.
默认采用Linear风格的克制设计：
  • 平静的界面层级
  • 出色的排版和间距
  • 少量色彩
  • 信息密度高但可读性强
  • 极简装饰元素
  • 仅当卡片本身是交互载体时才使用卡片
对于应用UI，围绕以下部分组织：
  • 主工作区
  • 导航
  • 次要上下文或检查器
  • 一个清晰的强调色用于操作或状态标识
避免：
  • 仪表盘式的卡片网格
  • 每个区域都添加粗边框
  • 在常规产品UI后添加装饰性渐变
  • 多种相互竞争的强调色
  • 无助于快速浏览的装饰性图标
如果某个面板去掉卡片样式后依然不影响表意，就移除卡片样式。

Imagery

图像运用

Imagery must do narrative work.
  • Use at least one strong, real-looking image for brands, venues, editorial pages, and lifestyle products.
  • Prefer in-situ photography over abstract gradients or fake 3D objects.
  • Choose or crop images with a stable tonal area for text.
  • Do not use images with embedded signage, logos, or typographic clutter fighting the UI.
  • Do not generate images with built-in UI frames, splits, cards, or panels.
  • If multiple moments are needed, use multiple images, not one collage.
The first viewport needs a real visual anchor. Decorative texture is not enough.
图像必须承担叙事功能。
  • 对于品牌、场所、编辑页面和生活方式产品，至少使用一张清晰真实的图像。
  • 优先选择实景照片，而非抽象渐变或虚拟3D对象。
  • 选择或裁剪出有稳定色调区域的图像来放置文本。
  • 不要使用带有嵌入标识、Logo或杂乱排版的图像，避免与UI冲突。
  • 不要生成带有内置UI框架、分栏、卡片或面板的图像。
  • 如果需要展示多个场景，使用多张图像，而非拼贴画。
首屏需要一个真实的视觉锚点，仅靠装饰性纹理是不够的。

Copy

文案

  • Write in product language, not design commentary.
  • Let the headline carry the meaning.
  • Supporting copy should usually be one short sentence.
  • Cut repetition between sections.
  • Do not include prompt language or design commentary into the UI.
  • Give every section one responsibility: explain, prove, deepen, or convert.
If deleting 30 percent of the copy improves the page, keep deleting.
  • 使用产品语言，而非设计评论性语言。
  • 让标题承载核心含义。
  • 支撑文案通常只用一句短句。
  • 删减区块间的重复内容。
  • 不要在UI中包含提示语或设计评论内容。
  • 每个区块只承担一项职责：解释、证明、深化或转化。
如果删除30%的文案后页面效果更好，那就继续删。

Utility Copy For Product UI

产品UI的实用文案

When the work is a dashboard, app surface, admin tool, or operational workspace, default to utility copy over marketing copy.
  • Prioritize orientation, status, and action over promise, mood, or brand voice.
  • Start with the working surface itself: KPIs, charts, filters, tables, status, or task context. Do not introduce a hero section unless the user explicitly asks for one.
  • Section headings should say what the area is or what the user can do there.
  • Good: "Selected KPIs", "Plan status", "Search metrics", "Top segments", "Last sync".
  • Avoid aspirational hero lines, metaphors, campaign-style language, and executive-summary banners on product surfaces unless specifically requested.
  • Supporting text should explain scope, behavior, freshness, or decision value in one sentence.
  • If a sentence could appear in a homepage hero or ad, rewrite it until it sounds like product UI.
  • If a section does not help someone operate, monitor, or decide, remove it.
  • Litmus check: if an operator scans only headings, labels, and numbers, can they understand the page immediately?
当工作内容是仪表盘、应用界面、管理工具或操作工作台时，默认使用实用文案而非营销文案。
  • 优先考虑定位、状态和操作，而非价值主张、氛围或品牌调性。
  • 从工作界面本身入手：关键绩效指标（KPIs）、图表、筛选器、表格、状态或任务上下文。除非用户明确要求，否则不要添加英雄区。
  • 区块标题应说明该区域是什么或用户能在此做什么。
  • 优秀示例："Selected KPIs"、"Plan status"、"Search metrics"、"Top segments"、"Last sync"
  • 除非特别要求，否则避免在产品界面使用空泛的英雄标语、隐喻、营销式语言和执行摘要横幅。
  • 支撑文本应用一句话说明范围、行为、时效性或决策价值。
  • 如果一句话能出现在首页英雄区或广告中，就重写它，直到听起来像产品UI的文案。
  • 如果某个区块无助于用户操作、监控或决策，就移除它。
  • 检验标准：如果操作员仅扫描标题、标签和数字，能否立刻理解页面内容？

Motion

动效

Use motion to create presence and hierarchy, not noise.
Ship at least 2-3 intentional motions for visually led work:
  • one entrance sequence in the hero
  • one scroll-linked, sticky, or depth effect
  • one hover, reveal, or layout transition that sharpens affordance
Prefer Framer Motion when available for:
  • section reveals
  • shared layout transitions
  • scroll-linked opacity, translate, or scale shifts
  • sticky storytelling
  • carousels that advance narrative, not just fill space
  • menus, drawers, and modal presence effects
Motion rules:
  • noticeable in a quick recording
  • smooth on mobile
  • fast and restrained
  • consistent across the page
  • removed if ornamental only
用动效来营造存在感和层级，而非制造噪音。
对于视觉导向的作品，至少实现2-3个有意图的动效：
  • 英雄区的一个入场动效序列
  • 一个与滚动关联的、粘性的或具有深度感的效果
  • 一个悬停、揭示或布局过渡效果，增强交互提示性
如果可用，优先使用Framer Motion来实现：
  • 区块展示动效
  • 共享布局过渡
  • 与滚动关联的透明度、位移或缩放变化
  • 粘性叙事效果
  • 推进叙事而非仅填充空间的轮播
  • 菜单、抽屉和模态框的呈现效果
动效规则：
  • 在快速录屏中能被注意到
  • 在移动端运行流畅
  • 快速且克制
  • 全页保持一致
  • 如果仅为装饰性，则移除

Hard Rules

硬性规则

  • No cards by default.
  • No hero cards by default.
  • No boxed or center-column hero when the brief calls for full bleed.
  • No more than one dominant idea per section.
  • No section should need many tiny UI devices to explain itself.
  • No headline should overpower the brand on branded pages.
  • No filler copy.
  • No split-screen hero unless text sits on a calm, unified side.
  • No more than two typefaces without a clear reason.
  • No more than one accent color unless the product already has a strong system.
  • 默认不使用卡片。
  • 默认不使用英雄卡片。
  • 当需求要求全屏时，不要使用带框或居中列的英雄区。
  • 每个区块最多只有一个核心创意。
  • 任何区块都不需要大量微小UI元素来自我解释。
  • 在品牌页面中，标题不能盖过品牌的存在感。
  • 无填充文案。
  • 除非文本位于视觉平静且统一的一侧，否则不要使用分屏英雄区。
  • 无明确理由时，最多使用两种字体。
  • 除非产品已有成熟的设计系统，否则最多使用一种强调色。

Reject These Failures

需规避的失败案例

  • Generic SaaS card grid as the first impression
  • Beautiful image with weak brand presence
  • Strong headline with no clear action
  • Busy imagery behind text
  • Sections that repeat the same mood statement
  • Carousel with no narrative purpose
  • App UI made of stacked cards instead of layout
  • 将通用SaaS卡片网格作为第一印象
  • 精美的图像但品牌存在感薄弱
  • 醒目的标题但无明确行动指令
  • 文本背后是杂乱的图像
  • 重复传达相同氛围的区块
  • 无叙事目的的轮播
  • 用堆叠卡片而非布局构建的应用UI

Litmus Checks

检验标准

  • Is the brand or product unmistakable in the first screen?
  • Is there one strong visual anchor?
  • Can the page be understood by scanning headlines only?
  • Does each section have one job?
  • Are cards actually necessary?
  • Does motion improve hierarchy or atmosphere?
  • Would the design still feel premium if all decorative shadows were removed?
  • 首屏中品牌或产品是否辨识度极高？
  • 是否有一个核心视觉锚点？
  • 仅扫描标题能否理解页面内容？
  • 每个区块是否只承担一项功能？
  • 卡片是否真的有必要？
  • 动效是否提升了层级或氛围？
  • 如果移除所有装饰性阴影，设计是否依然显得高品质？