skills.rest
mckissinger
mckissingerCOMMUNITY
Explore all skills by this author →
GitHub

app-design-directions

Create a structured workflow for exploring and selecting application interface design directions.

1|Updated Jun 29, 2026
Search Tags:#design system#design tokens#product design#ui design#mockups#visual direction#app interface
One-click install
npx skills add https://github.com/mckissinger/keel --skill app-design-directions
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: app-design-directions
Source: https://github.com/mckissinger/keel/tree/main/skills/app-design-directions
Command: npx skills add https://github.com/mckissinger/keel --skill app-design-directions

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps product teams avoid generic AI-designed interfaces by creating a structured process for discovering, comparing, and converging on a purposeful application design system.

Core Features & Use Cases

  • Design Direction Exploration: Investigates an application, defines a design brief, and creates multiple distinct visual directions with clear tradeoffs.
  • Mockup and System Convergence: Builds throwaway comparison mockups, captures user decisions, and transforms the chosen direction into a durable component and token-based workbench.
  • Use Case: A SaaS team redesigning its dashboard can use this Skill to explore several UI systems, compare realistic screens using their own product data, select a direction, and establish reusable design tokens and components.

Quick Start

Use the app-design-directions skill to explore three distinct UI directions for my application, create comparison mockups, and build the selected design system.

Frequently Asked Questions about app-design-directions

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

FAQPage Schema
How do I explore different UI design directions before building a design system?▼

You can structure app design direction exploration by defining a design brief, generating multiple distinct visual directions, building throwaway comparison mockups, and converging on a selected direction to establish durable design tokens and components.

What is the best way to avoid generic AI-designed app interfaces?▼

To avoid generic AI-designed interfaces, implement a structured process for discovering, comparing, and converging on a purposeful application design system using design briefs, reference analysis, and platform-aware UI conventions.

Can I use this process to redesign a SaaS dashboard with my own product data?▼

Yes, this workflow applies to SaaS dashboard redesigns by allowing you to explore multiple UI systems, compare realistic mockups using your actual product data, and transform the chosen visual direction into a reusable token system.

How do I transform a chosen visual direction into a reusable design token system?▼

You transform a chosen visual direction into a reusable design token system by capturing user decisions from throwaway comparison mockups and converting the selected UI conventions into a durable component and token-based workbench.

When do I need to create a structured workflow for application interface design?▼

You need a structured application interface design workflow when undertaking product UI redesigns, dashboard creation, SaaS applications, internal tools, or software products requiring deliberate visual direction decisions before system implementation.

Related Skills

Explore More Design & Creative Skills→
byonk19-svgbyonk19-svg

shape

Conduct a structured discovery interview to produce a design brief.

Community
Advanced
Adelie-SquadAdelie-Squad
17

ui-designer

Create and apply design tokens for color, typography, and spacing.

Official
Intermediate
yonetim258852yonetim258852

generate-ui-from-brand

Convert a URL or DESIGN.md into a structured UI specification with design tokens.

Community
Advanced
SensLiaoSensLiao

brandkit

Generate brand-image kits with logos, identity systems, and visual guidelines.

Community
Advanced