design-docs

Extract design tokens from articles and generate brand-aligned pages.

Updated Aug 23, 2025
One-click install
npx skills add https://github.com/therealityreport/trr-app --skill design-docs-therealityreport
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-docs
Source: https://github.com/therealityreport/trr-app/tree/main/.agents/skills/design-docs-agent/skills/design-docs
Command: npx skills add https://github.com/therealityreport/trr-app --skill design-docs-therealityreport

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ingest articles from publishers, extract design tokens, and generate brand-consistent pages and tabs across a brand.

Core Features & Use Cases

  • Ingest articles and extract actual computed design styles (font sizes, weights, colors) and tokens.
  • Generate brand-aligned pages and wire 15-brand-tabs where applicable.
  • Use case: when a designer publishes content, automatically update tokens and pages to reflect the latest branding.

Quick Start

Provide an article URL to ingest and run the design-docs pipeline.

Frequently Asked Questions about design-docs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract design tokens from publisher articles?

To extract design tokens from publisher articles, you provide an article URL to ingest. The system runs a 5-wave pipeline that validates content, extracts actual computed CSS styles like font sizes and colors, and generates brand-aligned pages.

Can I automatically sync brand tabs when a designer publishes content?

Yes, you can automatically sync brand tabs when a designer publishes content. The pipeline wires up to 15 brand tabs, ensuring computed styles are extracted and chrome uses CSS variables for consistent brand chrome syncing.

What is the best way to generate brand-consistent pages from ingested articles?

The best way to generate brand-consistent pages is through a 5-wave pipeline: Validate, Extract, Generate, Wire, and Sync. This ensures computed styles are extracted from actual CSS, maintaining color independence per article for accurate branding.

Does the design token extraction process rely on actual CSS or predefined values?

Design token extraction relies on actual CSS rather than predefined values. The pipeline ensures computed styles like font weights and colors are extracted directly from the actual CSS of the ingested publisher articles for accurate token generation.

Are there limitations on color independence when syncing multiple brand tabs?

There are no limitations on color independence when syncing multiple brand tabs; the pipeline enforces color independence per article. This ensures each ingested article maintains its distinct color palette while syncing across up to 15 brand tabs.