跳到正文
cccskills
免费在 GitHub 公开

ui-mockup

Create screen mockups at three levels: text wireframes, standalone HTML files, or working prototype pages. Use requirements, existing app styles, and real project data to show layouts and interactions for review or testing.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

Create UI mockups at three fidelity levels — ASCII wireframes for quick iteration, standalone HTML mockups for delivery with requirements, and live prototypes for interaction testing.

查看安装方法

适用场景

  • Sketch screen layouts while writing requirements
  • Deliver HTML mockups alongside requirements
  • Test interactions with existing components

包含的文件(1)

  • SKILL.md2.6 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

You are a UI prototyping assistant that creates mockups for product managers at three fidelity levels.

Three Fidelity Levels

Level 1: ASCII Wireframes (fastest, during requirements writing)

Text-based wireframes in markdown showing layout, information hierarchy, and key interactions. Where: supporting/mockup-ascii.md

Rules:

  • Use box-drawing characters for structure
  • Show real data, not placeholder text
  • Annotate interactive elements
  • Note key behaviors below each wireframe
  • Include frontmatter with screen list

Level 2: Standalone HTML Mockups (for delivery with requirements)

Self-contained HTML files that look like the real app. Portable, no dependencies except Google Fonts. Where: supporting/mockup-{feature}.html

Rules:

  • Match the application's existing styling exactly
  • Use real data from the codebase
  • Only show what's in SPEC.md
  • Self-contained single HTML file
  • Screen switcher nav to toggle between screens via JavaScript
  • Keep under 1,000 lines

Level 3: Live Prototypes (for interaction testing)

Real framework pages using the actual component library. Runs in the dev server.

Rules:

  • Use ONLY existing components — don't create new ones
  • Hardcoded mock data, no API calls
  • Match existing page styling exactly

Process

Step 1: Understand What to Mockup

Read feature folder docs first:

  • SPEC.md — acceptance criteria define what screens are needed
  • validation.md — the narrowest wedge tells you what's most important to show
  • background.md — customer drivers and competitive context inform what to emphasize

Then ask the PM about fidelity level and specific screens.

Step 2: Gather Real Data

  • Read the requirements acceptance criteria
  • Read existing codebase components to match styling
  • Pull real data from seed files or config
  • Never use placeholder data

Step 3: Create the Mockup

Step 4: Connect to Requirements

  • Save to supporting/
  • Reference from background.md under "Visual References"
  • Note in requirements if the mockup informed acceptance criteria

Guidelines

  • Use real data. Real names, real ranges, real hierarchies.
  • Only show what's in SPEC.md. Don't add features beyond the requirement.
  • Less is more. 3-5 screens beats 10.
  • Match the app exactly. Read existing code and match styling patterns.
  • Tell the PM what's real vs mocked.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Automate website interactions through a command-line browser tool. Navigate pages, fill forms, extract text, save screenshots or PDFs, reuse login sessions, and compare page states to check the effects of actions or website changes.

中文简介正在准备中。当前显示英语简介。

  • Automating form entry and submission
  • Extracting page text and saving screenshots
  • Comparing page appearance before and after changes
mvschwarz/openrig79082026年10月19日 更新

Design and maintain applications where OpenRig agents help run the system. Organize instructions, shared state, and artifact checks, then trace unexpected behavior to the code, skill, or schema that needs repair.

中文简介正在准备中。当前显示英语简介。

  • Designing an application operated by OpenRig agents
  • Organizing instructions and shared application state
  • Tracing unexpected behavior to its source
mvschwarz/openrig79082026年10月19日 更新

Design and run bounded procedures in environments where current conditions are uncertain. The skill separates agent judgment from precise tool actions, verifies each effect, and records checkpoints so interrupted work can resume from observed evidence.

中文简介正在准备中。当前显示英语简介。

  • Designing procedures for environments with varying conditions
  • Resuming interrupted operations from verified evidence
  • Deciding whether an agent or ordinary code should control a procedure
mvschwarz/openrig79082026年10月19日 更新

Create reusable starting configurations that combine an agent’s role, startup context, and source history. The skill guides registry entries, checks whether their sources are current, and manages their progression from initial capture to recommendation or retirement.

中文简介正在准备中。当前显示英语简介。

  • Create reusable startup context for an agent role
  • Refresh an agent workspace from an existing starter
  • Check a starter’s source history and freshness
mvschwarz/openrig79082026年10月19日 更新

Guides the design and review of agent startup context, including role files and links to authoritative records. It helps identify stale guidance, missing updates, overloaded startup files, and instructions that lose the purpose of the work.

中文简介正在准备中。当前显示英语简介。

  • Designing startup files for a new agent
  • Reviewing stale guidance used by running agents
  • Separating role information from reusable procedures
mvschwarz/openrig79082026年10月19日 更新

Configure selected OpenRig command permissions in Claude Code or Codex at the agreed project or user scope. Preserve existing restrictions, verify that settings load and behave as intended, and record additions so they can be removed later.

中文简介正在准备中。当前显示英语简介。

  • Configuring command permissions before launching an agent team
  • Reducing repeated approvals for selected rig commands
  • Adding permission rules within a chosen project scope
mvschwarz/openrig79082026年10月19日 更新

查看 mvschwarz 的全部技能

报告此技能的问题