LogoClawIndex
CasesSkillsAbout
LogoClawIndex

frontend-design - Create distinctive production-grade frontend code

Design and implement distinctive, production-ready user interfaces and code while avoiding generic layout generator patterns.

Tags

Updated: 2026-09-17

Capabilities

Typical Inputs

Typical Outputs

What this skill does

  • Evaluate designs using DFII scoring
  • Define aesthetic tone and purpose
  • Configure custom typography and colors
  • Generate production-ready frontend code
  • Provide design system snapshots
  • Provide design differentiation callouts

Inputs

  • User task scope and purpose
  • Target audience and product context
  • Success criteria and safety boundaries

Outputs

  • Design direction summary
  • Design system snapshot
  • Full working frontend code
  • Differentiation callout

Requirements

    Source

    • Spec: SKILL.md

    ClawIndex

    OpenClaw Skills & Use Case Index

    ClawIndex is an ecosystem-driven index of OpenClaw skills and real-world use cases.

    Index

    Skills·
    Cases

    Meta

    About·
    Disclaimer·
    Email·
    GitHub
    © 2026 ClawIndex All Rights Reserved.
    frontend-design
    ui-design
    design-system
    html-css
    react
    Evaluate designs using DFII scoring
    Define aesthetic tone and purpose
    Configure custom typography and colors
    Generate production-ready frontend code
    User task scope and purpose
    Target audience and product context
    Success criteria and safety boundaries
    Design direction summary
    Design system snapshot
    Full working frontend code