Community影像github.com

aj-geddes/wireframe-prototyping

建立線框圖與互動式原型，以視覺化使用者介面並及早收集回饋。在開發前運用工具與技巧傳達設計想法。

wireframe-prototyping 是什麼？

此技能專注於協助開發者與設計師建立線框圖與互動式原型，用以視覺化使用者介面，並在開發週期早期收集利害關係人的回饋。透過使用 Figma、Balsamiq 或 Axure 等繪圖工具，以及 HTML/CSS/JavaScript 等前端技術，使用者能快速建立低保真或高保真的原型，並模擬使用者導覽流程。此技能支援主流 AI 編碼代理平台（如 Claude Code、Cursor 與 Codex），並整合 Git 版本控制與自動化測試流程。藉由及早溝通設計想法，團隊能減少誤解、降低反覆修改成本，並確保最終產品符合使用者需求。技能的核心在於將抽象的設計概念具體化，促進團隊協作與迭代優化。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/aj-geddes/useful-ai-prompts/tree/main/skills/wireframe-prototyping

Installed? Explore more 影像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

查看原文→瀏覽所有技能

在你喜歡的 AI 中提問

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

說明文件

wireframe-prototyping 是做什麼的？

建立線框圖與互動式原型，以視覺化使用者介面並及早收集回饋。在開發前運用工具與技巧傳達設計想法。

概觀

此技能協助你將設計概念轉化為具體的線框圖與原型，從而:

  • 早期驗證: 在投入大量開發資源前，驗證使用者體驗與設計假設。
  • 團隊溝通: 以視覺化方式與開發者、設計師和產品經理進行高效溝通。
  • 迭代優化: 快速迭代原型，根據回饋逐步完善設計。

支援的工具與技術

  • 繪圖工具: Figma, Balsamiq, Axure RP, Sketch
  • 前端技術: HTML, CSS, JavaScript, React, Vue.js
  • 協作平台: Miro, FigJam, Lucidchart
  • 版本控制: Git, GitHub, GitLab

使用方式

  1. 定義需求: 輸入使用者故事或功能需求。
  2. 建立線框圖: 可選擇建立低保真草圖或高保真設計稿。
  3. 加入互動: 為原型添加連結、動畫與轉場效果。
  4. 分享與收集回饋: 將原型分享給團隊成員，並標註反饋點。
  5. 迭代優化: 根據回饋調整設計，直至達成共識。

範例指令

# 初始化 Figma 專案
wireframe-prototyping init --tool figma --project "使用者登入流程"

# 建立低保真線框圖
wireframe-prototyping create --template low-fidelity --output wireframe.html

# 匯出原型以供分享
wireframe-prototyping export --format html --include-interactions

環境變數

  • WP_FIGMA_TOKEN: Figma API 金鑰
  • WP_GIT_BRANCH: 原型版本控制分支名稱

最佳實踐

  • 保持簡單: 從低保真線框圖開始，逐步增加細節。
  • 測試真實場景: 使用真實的使用者資料與流程來測試原型。
  • 定期檢視: 在每個衝刺週期中安排原型檢視會議。
  • 文件化: 記錄設計決策與變更歷程。

更多資源

此技能旨在加速設計反饋循環，並促進跨團隊協作。

Individual skills in this repo

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

aj-geddes/android-kotlin-development

Develop native Android apps with Kotlin. Covers MVVM with Jetpack, Compose for modern UI, Retrofit for API calls, Room for local storage, and navigation architecture.

aj-geddes/ansible-automation

Infrastructure automation and configuration management using Ansible playbooks, roles, and inventory. Use for deploying applications, patching, and managing servers.

aj-geddes/architecture-diagrams

Create system architecture diagrams using Mermaid, PlantUML, C4 model, flowcharts, and sequence diagrams. Use when documenting architecture, system design, data flows, or technical workflows.

aj-geddes/code-review-analysis

Perform comprehensive code reviews with best practices, security checks, and constructive feedback. Use when reviewing pull requests, analyzing code quality, checking for security vulnerabilities, or providing code improvement suggestions.

aj-geddes/flask-api-development

Develop lightweight Flask APIs with routing, blueprints, database integration, authentication, and request/response handling. Use when building RESTful APIs, microservices, or lightweight web services with Flask.

aj-geddes/ios-swift-development

Develop native iOS apps with Swift. Covers MVVM architecture, SwiftUI, URLSession for networking, Combine for reactive programming, and Core Data persistence.

aj-geddes/jenkins-pipeline

Build Jenkins declarative and scripted pipelines with stages, agents, parameters, and plugins. Implement multi-branch pipelines and deployment automation.

aj-geddes/markdown-documentation

Master markdown formatting, GitHub Flavored Markdown, README files, and documentation formatting. Use when writing markdown docs, READMEs, or formatting documentation.

aj-geddes/nginx-configuration

Configure Nginx web server for high-performance reverse proxy, load balancing, SSL/TLS, caching, and API gateway functionality.

aj-geddes/nodejs-express-server

Build production-ready Express.js servers with middleware, authentication, routing, and database integration. Use when creating REST APIs, managing requests/responses, implementing middleware chains, and handling server logic.

aj-geddes/rest-api-design

Design RESTful APIs following best practices for resource modeling, HTTP methods, status codes, versioning, and documentation. Use when creating new APIs, designing endpoints, or improving existing API architecture.

相關技能

steipete/songsee

Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.

community

affaan-m/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

community

mattpocock/improve-codebase-architecture

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

community

lobehub/add-provider-doc

Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.

community

addyosmani/browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

community

bytedance/chart-visualization

This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.

community
← More 影像 skills