Skip to content

feat: add visual dashboard generator via 'show' command#39

Open
tototofu123 wants to merge 1 commit intogoogle-labs-code:mainfrom
tototofu123:feat/visual-dashboard
Open

feat: add visual dashboard generator via 'show' command#39
tototofu123 wants to merge 1 commit intogoogle-labs-code:mainfrom
tototofu123:feat/visual-dashboard

Conversation

@tototofu123
Copy link
Copy Markdown
Contributor

This PR adds a show subcommand that generates a static HTML dashboard visualizing the tokens defined in a DESIGN.md file. This provides a human-readable verification layer to complement the existing technical validation. I used the Stitch web DESIGN.md visualization as a reference for the generated HTML page structure and layout.

This feature addresses the following:

  • Solves Generic Overview #18 (Generic Overview): Provides a fully automated, data-driven visual overview of all colors, typography, and component atoms.

Technical Implementation:

  • Command Orchestration: packages/cli/src/commands/show.ts ensures dashboards are only generated after successful lint() validation.
  • Token Resolution: Uses a new engine in packages/cli/src/commands/html.ts to surgically resolve internal ResolvedColor and ResolvedDimension objects into valid CSS strings.

@tototofu123
Copy link
Copy Markdown
Contributor Author

Here are some links:

A visualization of how the HTML file looks like --
Click the Visualization Portal

The example repo of the HTML pages --
GitHub Repository

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant