skills.rest
devopstales
devopstalesCOMMUNITY
Explore all skills by this author →
Website𝕏@_devopstalesGitHub

skillgrid-ui-design-artifacts

Document UI design decisions into DESIGN.md and OpenSpec design.md artifacts.

1|Updated Apr 22, 2026
Search Tags:#ux design#ui design#design documentation#design collaboration#artifacts management#skillgrid
One-click install
npx skills add https://github.com/devopstales/aiskillgrid --skill skillgrid-ui-design-artifacts
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: skillgrid-ui-design-artifacts
Source: https://github.com/devopstales/aiskillgrid/tree/main/.agents/skills/skillgrid-ui-design-artifacts
Command: npx skills add https://github.com/devopstales/aiskillgrid --skill skillgrid-ui-design-artifacts

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill ensures that UI design decisions are documented and stored in the correct Skillgrid artifacts, facilitating collaboration and maintaining design consistency throughout the development process.

Core Features & Use Cases

  • Design Decision Documentation: Stores design decisions in DESIGN.md, .skillgrid/preview/, PRD success criteria, and OpenSpec design.md.
  • Artifact Placement: Manages design artifacts such as design system tokens, draft comparisons, user-facing acceptance criteria, and implementation constraints.
  • Parallel Design Options: Supports evaluation of multiple UI directions and component/module interface shapes against various criteria.
  • Design It Twice For Interfaces: Offers a structured approach to designing UI components and interfaces, ensuring all aspects are considered.
  • Preview Discipline: Provides guidelines for creating and managing visual A/B/C options and linking them to PRD and handoff documents.
  • OpenSpec Design Insert Template: Facilitates the insertion of UI/UX constraints into OpenSpec design.md for implementation guidance.
  • Use Case: When designing a new feature, this Skill helps ensure that all design decisions are properly documented and stored, allowing the team to review and iterate on the design.

Quick Start

Use the skillgrid-ui-design-artifacts skill to document the UI design decisions for your new feature in the DESIGN.md file.

Frequently Asked Questions about skillgrid-ui-design-artifacts

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

FAQPage Schema
How do I document UI design decisions for a new feature?▼

Document UI design decisions by storing them in DESIGN.md, .skillgrid/preview/, PRD success criteria, and OpenSpec design.md. This approach manages design system tokens, draft comparisons, and implementation constraints to maintain design consistency throughout development.

What is the best way to manage parallel UI design options during development?▼

Managing parallel UI design options involves evaluating multiple UI directions and component interface shapes against various criteria. Visual A/B/C options are created and linked directly to PRD and handoff documents for structured preview discipline.

How do I insert UI UX constraints into OpenSpec design.md for implementation?▼

Insert UI UX constraints into OpenSpec design.md using the OpenSpec Design Insert Template. This template facilitates adding user-facing acceptance criteria and implementation constraints into the file to provide clear implementation guidance for developers.

Do I need the Skillgrid environment to manage design collaboration artifacts?▼

Yes, you need the Skillgrid environment to manage design collaboration artifacts. Full functionality requires Skillgrid and design-related subagents to properly store design system tokens, draft comparisons, and user-facing acceptance criteria in the correct artifacts.

What guidelines exist for creating visual A/B/C preview options for design handoff?▼

Guidelines for creating visual A/B/C preview options follow a preview discipline that manages multiple visual directions and links them to PRD and handoff documents. This structured approach ensures all design decisions are properly documented and stored for team review.

Related Skills

Explore More Design & Creative Skills→
corezoidcorezoid
58

simulator-init

Initialize and configure the Simulator.Company environment with OAuth authentication and .env storage.

Official
Intermediate
masrurimzmasrurimz

momus

Review plans and specs to identify gaps, ambiguities, and missing context.

Community
Basic
thepriceisrightthepriceisright

prd

Generate a structured PRD from a feature brief and save it to tasks/prd-[feature-name].md.

Community
Advanced
iButtersiButters
3

css-tokens

Generate CSS design tokens for colors, spacing, typography, and theming.

Community
Intermediate