SuperAPI AI Directory
Partner中文AI newsFavorites
Skillslight-frontend-design

light-frontend-design

Frontend & websites

View repository

Updated 10-16 10:21

About this skill

Aesthetically pleasing frontend design

First define the design direction (four questions that must be answered before writing code, from the frontend-design skill)

  1. Purpose: What problem does it solve, who uses it, in what scenario (defense/large screen/backend).
  2. Tone: Choose one from the tone spectrum and commit to it all the way—tech/academic/agricultural intelligence/medical/minimal/glassmorphism/card/large screen/management system/mobile, or editorial/brutalist/luxury/organic. First do a web search to verify the named products/brands involved (a 10-second search beats 1-2 hours of rework).
  3. Constraints: Framework, performance, accessibility, information density.
  4. Differentiation: One unique visual/interaction memory point that will be remembered (not piling on effects). Based on this, define design language: palette (primary/secondary/accent/neutral) + typography system + spacing grid + corner radius and shadows + icon style, landing in Design Tokens, registered in db05.If the project has databases/db09-projects/projects/<project_name>/palette.json , its colors must be used(a visual SSOT instance shared with paper figures m11/PPT m16; the frontend does not establish a separate palette; for the schema see the db09 README, and the source of truth for color value anchors is db05 design_tokens.template.json). Design grows on the existing context (brand/codebase/UI kit/real screenshots) rather than being invented from nothing. When the brief is too vague (e.g. "make something pretty"), enter Advisor mode: propose 3 differentiated directions from the style library for the user to choose, then commit to one (canvas-design). If a brand is involved, first follow the Core Asset Protocol to collect logo/product images/UI screenshots/brand colors and fonts, and write them into brand-spec.md as first-class citizens. Design system persistence: use one global source of truth (e.g. MASTER.md/design tokens) + page-level override files (page files override the global; if there is no page file, use the global), to avoid cross-page style drift (ui-ux-pro-max).

Design principles (quantifiable)

  • Clear visual hierarchy, ample whitespace, strict alignment; "primary color + sharp accent color" is better than an evenly distributed timid palette.
  • Typography: avoid Inter/Roboto/Arial/system fonts; pair display type with refined body text to create personality.
  • Consistency: component reuse, tokenization, unified style (a07); use CSS variables to carry the theme.
  • Accessibility (WCAG 2.1 AA): body text contrast ≥4.5:1, large text ≥3:1, UI components ≥3:1; keyboard accessible + visible focus states; color is not the sole carrier of information; meaningful alt for images; respect prefers-reduced-motion.
  • Restrained motion: prefer pure CSS for HTML, use Motion/GSAP for React; one well-orchestrated page load + staggered reveal (animation-delay) > scattered micro-interactions; hover/interaction transitions 150-300ms.
  • Anti-AI-slop prohibitions: purple/pink gradients on white backgrounds, emoji as icons (use SVG: Lucide/Heroicons), rounded-card-left-border, gradient-orb representing AI, CSS silhouettes masquerading as product images, cookie-cutter template layouts.
  • Three adjustable knobs (taste-skill): VARIANCE (layout experimentation)/MOTION (motion depth)/DENSITY (information per screen), dial them by scenario—turn DENSITY up for large screens, turn VARIANCE up for landing pages, turn both down for backends.

Technical implementation (as needed, see a09)

For stack selection and executable key points for each framework (commands/options/known pitfalls), see references.md and references/ecosystem-2026.md, the body only gives decision-level hints:

  • Next.js: default to Server Components (zero client JS), add "use client" on demand and respect boundaries to prevent bundle bloat; loading.tsx + Suspense streaming, parallel data fetching, next/font to prevent layout shift,<Image> to prevent CLS; authenticate each one inside Server Actions; before launch next build+ Lighthouse. (For details, see the references "next-best-practices" section.)
  • shadcn/ui：npx shadcn@latest init then add [component] copy the source code into the project for self-maintenance, use CSS variables for theming, and diff manually on upgrades. (For CLI options, see the references "shadcn/ui" section.)
  • Tailwind v4：CSS-first（@import "tailwindcss" + @theme expose tokens), variants can be stacked, mobile-first, reuse via components rather than over-extracting classes.
  • Component API design: composition over boolean props, compound + context, expose only {state,actions,meta}, explicit variants over booleans. (vercel-composition-patterns, see references.)
  • Mobile/mini programs: touch targets iOS ≥44pt/Android ≥48dp, body text ≥16, tabBar 3-5; for mini program component libraries choose one of TDesign/Vant/WeUI/Ant Design Mini/NutUI Taro and do not mix them.
  • Visualization: ECharts/D3/Plotly/large screens, unified color palette, balance density and readability.
  • Design tokens consistent across platforms: use Style Dictionary / Terrazzo to compile tokens from a single source to CSS/JS across platforms; align the authoritative source with db05 design_tokens.template.json(DTCG visual SSOT, maintained by a07), the frontend does not establish a separate palette/type scale. For details, see the references/ecosystem-2026.md"design token engineering" section.

Inspiration sources (learn layout, do not plagiarize)

  • Popular skill radar: when you need to update skills or choose external design capabilities, first look at references/ecosystem-2026.md, prioritize absorbing official/high-install-count/verifiable workflows, rather than installing unknown low-signal packages.
  • Mobbin: screenshots and user flows of real production apps (iOS/Android/web)—before defining information architecture/interaction order, first find 2-3 similar real flows for comparison.
  • Awwwards: high-level web creativity, and directly borrow its review rubric for self-assessment (see below).
  • Others: Dribbble, Behance, Land-book, Godly, Siteinspire, Figma Community, Tailwind UI, Vercel templates. Summarize "why it looks good, what scenarios it suits, what components are needed" and consolidate into db05.
  • image-to-code three-stage method (taste-skill): when unsure of the visual direction, first Generate (produce a reference board/hero image) → Analyze (break down layout/typography/spacing/motion cues) → Implement (produce code according to the reference frame), which is more stable than writing directly from thin air.

Mechanical gates (scripts are the truth, full rules see script selftest)

Two linters turn "good-looking" into countable judgments; must pass before delivery:

  • Countable checklist python scripts/audit_checklist.py(add data-* annotations to page elements then run): R1 eyebrow ≤ceil(sections/3), R2 consecutive image-text split ≤2, R3 ≥8 sections require ≥4 layout families, R4 hero subtext ≤20 words/≤4 lines, R5 nav single line ≤80px, R6 bento N content = N cells. Comes with GOOD/BAD self-tests.
  • Anti AI-tell blacklist python scripts/ai_tell_lint.py: T1 scroll cue, T2 decorative section-number eyebrow, T3 version/Made-with filler footer, T4 body em-dash (LLM tell)—change immediately if hit. Comes with DIRTY/CLEAN self-tests.

Fonts and prohibited list (full table see references/fonts-and-colors.md)

  • Sans display default pool: Geist / General Sans / Satoshi / Clash Display / Cabinet Grotesk; for body text pairings see references.
  • Hard bans: serif — ban Fraunces / Instrument Serif (now an AI-tell); colors — ban the entire premium-consumer "beige #F5F0E8 family + brass #B08D57 family + sauce-black #1A1714 family" plus purple/pink gradients on white backgrounds; for body text avoid Inter/Roboto/Arial/system fonts.

brief → official design system mapping (see references/design-systems-map.md)

Choose by brief signalexactly one set: Fluent (Office/Teams) / Carbon (data backend) / Polaris (e-commerce) / Atlaskit (collaboration) / Primer (devtool) / govuk-frontend (UK government) / USWDS (US government) / Radix (self-built foundation). One set per repo, version pinned (the npm package names and versions in the table were verified via curl registry.npmjs.org with HTTP 200).

redesign audit protocol (see references/redesign-audit.md)

Redesigning an existing project: detect (preserve vs overhaul) → audit 4 axes (Layout/Spacing/Hierarchy/Styling) → preservation rules (preserve IA/brand/already-compliant accessibility) → modernisation levers → redesign vs rebuild decision tree.

Runnable code skeletons (assets/, including prefers-reduced-motion + cleanup)

Copy directly into a Next.js client component or a Vite+React project:

  • assets/gsap-sticky-stack.tsx — GSAP ScrollTrigger sticky stacked cards (gsap.context + ctx.revert cleanup).
  • assets/gsap-horizontal-pan.tsx — vertical scroll-driven horizontal pan, pin+scrub, reduced-motion falls back to native overflow.
  • assets/motion-scroll-reveal.tsx — framer-motion staggered scroll reveal, useReducedMotion disables animation, observer auto-cleans up.

Self-assessment rubric (must pass before delivery)

  • Awwwards dimensions: Design 40% / Usability 30% / Creativity 20% / Content 10%, score yourself, redo if below 6.5 (on Awwwards only 6.5+ earns an Honorable Mention; developer awards require >7).
  • Actionable checklist: don't use emoji as icons; all clickable elements cursor-pointer; smooth hover transitions 150-300ms; light text contrast ≥4.5:1; visible keyboard focus states; respect prefers-reduced-motion; test all responsive breakpoints 375/768/1024/1440px; artifacts load cleanly in a real browser.
  • Mechanical gates (must all pass)：python scripts/audit_checklist.py 6/6 + python scripts/ai_tell_lint.py CLEAN。

Scenario fit

  • Defense/presentation: emphasize display impact, first-screen punch, prominent core data.
  • Data platform/large screen: balance information density and readability, real-time feel, unified color palette.
  • Production system: usability > showmanship, standardize in a management-system style.

Deliverables

Runnable frontend code + design notes (style/palette/fonts/component list) + screenshots. Design system registered in db05 and db09.

Interfaces

Data interface connects to a04; coordinate visual style with PPT (m16)/paper figures (m11) (a07); flag risks of unauthenticated interfaces (security_awareness). Visual inspiration images/moodboards can reuse m16 imggen-enhanced's image-generation wrapper (light-slides/scripts/imagegen.py) and style_anchor approach (see m16 light-slides/references/imggen_pipeline.md) — the same project palette is unified by a07, and generated-image element colors don't start a separate set.

Per-tool verification notes (real endpoints/commands/parameters/pitfalls) are in references.md in the same directory. For popular skills/frontend stack version snapshots see references/ecosystem-2026.md. Mechanical gate scripts are in scripts/; runnable code skeletons are in assets/; font-color/design-system/redesign protocols are in the references/ directory.