/fec-ui-design

name: fec-ui-design
description: Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or visual QA. Interface polishing, interactive state.

#UI design

Suitable for UI tasks that require advancing the front-end interface to be "in line with the product context, scannable, trustworthy, recognizable, and stable in details". When systematic design suggestions are needed, load [design-intelligence.md](references/design-intelligence.md); when long-term precipitation of the design system is required, load [master-page-overrides.md](references/master-page-overrides.md); when doing UI/UX QA before going online, load [pre-delivery-checklist.md](references/pre-delivery-checklist.md).

The executable design system generator is located at [design-system.mjs](scripts/design-system.mjs), and its original knowledge package includes [product-rules.json](data/product-rules.json), [style-archetypes.json](data/style-archetypes.json), [ux-quality-rules.json](data/ux-quality-rules.json) and [stack-ui-rules.json](data/stack-ui-rules.json).

Purpose

Establish design direction for pages, components, dashboards and tool interfaces, and complete implementable visual and interactive polish.

Procedure

1. Clarify the work of the interface

• Start by saying what task it helps the user accomplish, rather than choosing a color or layout first.
• Determine whether this is a daily high-frequency tool, marketing display, content reading, visual exploration, game, or configuration/management backend.
• If Figma, Sketch, MasterGo, Pixso, Ink Knife, Mockup or screenshots are the source of truth, give priority to restoring the design context and do not invent your own direction.

2. Read the design context

• Before deciding on layout, colors, fonts, or motion, write out a line of design that reads: page type, target audience, primary mission, brand constraints, and sources of trustworthiness.
• Determine whether the current interface is a visual website, work/brand display, product marketing, tool workspace, data-intensive interface, mobile native process, or design draft restoration task.
• If the brief is clearly divergent, e.g. "minimalist yet intensely experimental", only ask a question that will change direction; otherwise make clear choices based on context.
• Regulated, public service, medical, financial, children, or strong accessibility scenarios prioritize stability, clarity, and recoverability without sacrificing usability for aesthetic adventures.

3. Define aesthetic proposition

• Write out the target users, usage scenarios, sources of trustworthiness, and a visual anchor that will be remembered.
• Visual anchors can come from information structure, real media, data form, industry materials, font character, interaction rhythm or spatial organization, rather than empty decoration.
• Expression must serve the business context: tool-based interfaces focus on efficiency and stability, while display-based pages focus on subject recognition and memory points.
• Set design dials for page types: visual intensity, motion intensity, information density, media authenticity and content persuasiveness; these dials must change with the task, rather than sticking to the same set of templates.
• Tool-type and data-type interfaces increase information density and reduce decorative animation by default; marketing, portfolio and brand pages can increase visual tension, but still ensure that the first screen task, main body and CTA are visible.
• The design dial is used to constrain implementation choices: high visual tension does not equal chaotic typography, high dynamic intensity does not equal scroll hijacking, and high media authenticity does not equal piles of stock atmosphere images.

4. Generate or read design system

• If the project does not yet have a design system, you can run `node skills/fec-ui-design/scripts/design-system.mjs "<product audience tone>" --project "<name>"` to generate suggestions.
• If reuse across sessions is required, use `--persist` to generate `design-system/<project>/MASTER.md`; use `--page <page>` to write page differences into `pages/<page>.md`.
• When building a specific page, read the page override first, and then read the Master; the page rules only cover the differences and do not copy the full design system.

5. Establish above-the-fold and visual hierarchy

• Tool-based interface: The core workspace, list, table, canvas or editor is directly displayed on the first screen.
• Landing page: H1 uses the brand, product, place, name or clear category, and the value description is placed in the auxiliary copy.
• Product/Object page: The real product, object, status or checkable media must be visible on the first screen.
• The first screen should leave a clear memory point, but should not obscure core tasks, navigation and status feedback.
• Marketing and product pages need to clearly define the audience, pain points, commitments, evidence and action entry points; the copywriting structure serves conversion, but does not use exaggerated, empty or unverifiable claims.
• The first screen of a visual page cannot be just text, gradients and decorations; it needs real products, people, spaces, brand applications, data status or checkable generated assets to bear the main information.
• Navigation should remain single-line and highly restrained on desktop; CTA copy should be kept short and clear, and should not be replaced with multi-line buttons on desktop.

6. Organize visual language

• Font: Give priority to using the project font system; if the task allows the establishment of a new direction, choose a title/text font combination that can express the character of the product