design-a-screen

仓库创建 2026年6月23日最近提交 23 天前SkillHot 收录 22 天前

▸ 精选理由

快速探索多种布局，利于信息架构与导航决策

这个 Skill 做什么

并行生成多套 ASCII 界面草图，比较并合成最佳屏幕布局方案

并行生成多套截然不同的屏幕草图（用 ASCII mockup 表示），再比较合成出最佳布局。需要探索界面布局、信息架构或决定导航形态（比如 top tabs、left rail 或向导式）时用。特点是强制“多样化再合并”的流程，能把抽象需求具体化为几种可比的屏幕方案。

▸ 展开 SKILL.md 英文原文

Generate multiple radically different screen layouts as ASCII mockups using parallel sub-agents, then compare and synthesize into one. Use when designing an app screen, dashboard, console, or page; exploring layout or information-architecture options; deciding navigation shape (top tabs vs left rail vs wizard); pinning down landing/empty/loading/done states; or when a plan has a significant UI surface that prose alone can't make concrete. Triggers on "design a screen", "mock up the UI", "wireframe", "explore layouts", "design it twice for the UI".

开发编程界面设计ASCII原型多方案探索通用

Stars

Forks

仓库内 Skill

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/Tritintruong114/usecase-factory/main/skills/design-a-screen/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/Tritintruong114/usecase-factory/main/skills/design-a-screen/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

# Design a Screen

Sibling to `design-an-interface`, applying the same "Design It Twice" principle (A Philosophy of Software Design) to **visual layout** instead of code interfaces: your first layout is unlikely to be the best. Fan out radically different screen designs as ASCII mockups, compare, then synthesize.

Use this BEFORE grilling logic. A sketch forces precision that a decision table hides — navigation shape, what's on first paint, where each action lives, empty/loading/done states. Grill the design against mockups, not prose.

## Workflow

### 1. Gather requirements

Before sketching, understand:

- [ ] What is this screen / app for? Who uses it? (expertise, device, frequency)
- [

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有