LogoClawIndex
CasesSkillsAbout
LogoClawIndex

design-md - Extract a design system from frontend source code

Analyzes frontend source files to produce a DESIGN.md design system covering colors, typography, spacing, components, and layout principles.

Tags

Updated: 2026-09-28
design systemfrontendsource analysisdesign tokensCSScomponent styling

Capabilities

Detect frontend frameworksMap source styling filesExtract design tokensAnalyze component styling

Typical Inputs

Frontend source directoryFrontend source filesFramework-specific reference files

Typical Outputs

DESIGN.md design system documentExtracted visual language description

What this skill does

  • Detect frontend frameworks
  • Map source styling files
  • Extract design tokens
  • Analyze component styling
  • Generate DESIGN.md documentation

Inputs

  • Frontend source directory
  • Frontend source files
  • Framework-specific reference files

Outputs

  • DESIGN.md design system document
  • Extracted visual language description

Requirements

  • Source directory access
  • Read and write permissions
  • No build dependencies required

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.