Communitygithub.com

pbakaus/shape

在編寫程式碼之前規劃功能的 UX 與 UI。它會執行一次結構化的探索訪談,然後產生一份設計簡報,引導後續實作。請在規劃階段使用,以建立設計方向、限制條件與策略。

shape 是什麼?

這個技能旨在協助開發者與 AI 在編寫程式碼之前,系統性地規劃一個新功能的 UX 與 UI。它的運作流程分為兩階段:首先,透過結構化的探索訪談來了解使用者、場景與目標,並釐清限制條件與策略;接著,根據訪談結果自動產生一份設計簡報,包含使用者流程、線框圖與視覺風格指南。這份簡報會作為實作階段的具體指引,協助團隊事前對齊設計方向與優先級,減少後續修改的成本。此技能特別適用於規劃階段的開發者或產品經理,支援在任何具備自然語言對話能力的 AI 平台(如 Claude Code、Cursor、Codex)上執行,透過逐步對話引導使用者提供需求,最終輸出結構化的設計文件。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/pbakaus/impeccable/tree/main/skills/shape

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

shape 是做什麼的?

在編寫程式碼之前規劃功能的 UX 與 UI。它會執行一次結構化的探索訪談,然後產生一份設計簡報,引導後續實作。請在規劃階段使用,以建立設計方向、限制條件與策略。

運作方式

  1. 探索訪談:AI 會以循序漸進的方式提問,收集關於功能目標、目標使用者、關鍵場景、限制條件與成功指標的資訊。此過程模擬產品經理與設計師的協作流程。
  2. 產生設計簡報:訪談結束後,AI 會將收集到的資訊整合為一份結構化的設計簡報,內容包括:
    • 功能摘要與目標
    • 使用者角色與場景
    • 使用者流程與線框圖(以純文字或 ASCII 藝術呈現)
    • 視覺風格指南(色彩、排版、互動模式)
    • 優先級與實作策略
  3. 後續指引:設計簡報完成後,可用於引導實際的程式碼編寫階段,確保實作與先前規劃的設計方向一致。

使用方式

  • 在規劃新功能時,向 AI 提出類似「幫我規劃這個新功能的 UX 與 UI」的請求。
  • AI 會開始探索訪談流程,請根據提示回答相關問題。
  • 完成所有問題後,AI 會產出完整的設計簡報。
  • 您可以隨時要求 AI 修改或補充設計簡報中的特定部分。

適用平台

本技能設計用於任何支援自然語言對話的 AI 平台,包括但不限於:

  • Claude Code
  • Cursor
  • Codex
  • 其他基於 LLM 的開發助手

注意事項

  • 此技能專注於規劃階段,不直接產生程式碼。
  • 產出的設計簡報為文字形式,不包含實際的圖形檔案。
  • 建議與後續的程式碼生成技能搭配使用,以達到完整的工作流程。

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

pbakaus/adapt

Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.

pbakaus/animate

Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.

pbakaus/arrange

Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.

pbakaus/audit

Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.

pbakaus/bolder

Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.

pbakaus/clarify

Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing.

pbakaus/colorize

Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.

pbakaus/critique

Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component.

pbakaus/delight

Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.

pbakaus/distill

Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.

pbakaus/extract

Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens.

pbakaus/frontend-design

frontend-design — an installable skill for AI agents.

pbakaus/harden

Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.

pbakaus/impeccable

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.

pbakaus/layout

Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.

pbakaus/normalize

Audits and realigns UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system.

pbakaus/onboard

Designs and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, or new user flows.

pbakaus/optimize

Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.

pbakaus/overdrive

Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary.

pbakaus/polish

Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great.

相關技能