skills.rest
iilleagl
iilleaglCOMMUNITY
Explore all skills by this author →
GitHub

ui-page-spec-writer

Convert UI design requests into structured Markdown design specifications.

Updated Mar 2, 2026
Search Tags:#markdown#ui-design#design-system#page-layout#design-spec#block-structure
One-click install
npx skills add https://github.com/iilleagl/Design2Code --skill ui-page-spec-writer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-page-spec-writer
Source: https://github.com/iilleagl/Design2Code/tree/main/.cursor/skills/ui-page-spec-writer
Command: npx skills add https://github.com/iilleagl/Design2Code --skill ui-page-spec-writer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams quickly convert UI design requirements into a structured Markdown design specification, reducing manual drafting time and ensuring consistency across projects.

Core Features & Use Cases

  • Generating a complete design specification document from user requirements, including layout, blocks, and components.
  • Providing a reusable documentation template aligned with the design system and tooling.
  • Use Case: Given a page description, produce a Markdown doc ready to be consumed by Pencil's design generator.

Quick Start

Describe the user's UI requirements and generate a complete design specification document.

Frequently Asked Questions about ui-page-spec-writer

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

FAQPage Schema
How do I generate a UI design specification from page requirements?▼

A UI design specification document details layout, blocks, and components with interaction rules. It is needed when converting UI design requests into structured Markdown for design tooling to ensure project consistency.

What's the best way to structure a Markdown design spec for design tooling?▼

To write a design spec from page descriptions, describe your UI requirements and generate a complete document. The output produces sections and blocks detailing layout, components, and interaction rules in Markdown.

Does this design spec writer align with a design system?▼

The page layout specification details sections and blocks that define components and interaction rules. It is applied to pages described by user input to produce a structured Markdown body format.

Can I use this to create block structure documentation for UI pages?▼

Generating a design specification from UI requirements requires no external dependencies. You simply describe the UI design request and produce a complete Markdown design specification document with sections and blocks.

Related Skills

Explore More Design & Creative Skills→
Rafael-RuedaRafael-Rueda

User's Request Understanding Capabillity

Clarify ambiguous user requests with structured select box options.

Community
Basic
cajiascajias

notion-publish-generated-markdown

Unescape HTML entities and publish markdown to Notion pages.

Community
Intermediate
Devsoul2026Devsoul2026
150

hermes-agent-skill-authoring

Validate in-repo SKILL.md files for YAML frontmatter and required fields.

Community
Intermediate
The13thNodeThe13thNode
3

design-reference-scraper

Extract design system patterns from reference websites into structured design tokens.

Community
Intermediate