Token导航 LogoToken导航

Agent Skill · 前端设计

architecture-design(建筑设计)

用于辅助界面设计、视觉规范、排版、配色、布局和交互体验优化。它适合让 Agent 根据产品场景整理页面结构、生成 UI 方案、检查视觉一致性或改进组件层级。使用时需要结合现有品牌、设计系统和用户任务,不应只堆装饰元素;涉及真实页面改动时,应通过截图或浏览器预览检查文本溢出、对齐和响应式表现。

architecture-design 是前端设计类 Agent Skill,可用宿主为 Codex、Claude、Cursor、Gemini CLI,通过GitHub 仓库获取,权限为需要联网;许可证信息还不明确,第三方扫描已通过,按安装量在前端设计类的 10,216 个 Skill 里排第 5,261。

总安装 706周安装 30GitHub Stars 115下载 247核验 2026-05-01

安装说明

本站只整理中文说明,不托管安装包,也不代用户安装。
GitHub
许可证
unknown

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手,先确认命令和权限,再让它执行。

请帮我安装这个 Agent Skill:architecture-design(建筑设计)
来源仓库:https://github.com/shawnpang/startup-founder-skills
仓库路径:skills/architecture-design
安装命令:
npx skills add https://github.com/shawnpang/startup-founder-skills --skill architecture-design
安装前请先检查当前环境是否支持对应 CLI,并向我确认将要执行的命令、安装目录、联网范围和文件读写权限;确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill;本站只展示命令,不托管安装包,也不自动执行。

skills.shnpx skills
npx skills add https://github.com/shawnpang/startup-founder-skills --skill architecture-design

这个 Skill 是做什么的

前端设计类 Skill 关注页面结构、视觉规范和组件写法,输出通常是可运行的界面代码。

architecture-design 用于辅助界面设计、视觉规范、排版、配色、布局和交互体验优化。它适合让 Agent 根据产品场景整理页面结构、生成 UI 方案、检查视觉一致性或改进组件层级。使用时需要结合现有品牌、设计系统和用户任务,不应只堆装饰元素。

涉及真实页面改动时,应通过截图或浏览器预览检查文本溢出、对齐和响应式表现。当前底部简介为空,需结合原始 SKILL.md 内容进一步核验功能细节和使用限制。

来源仓库内路径:skills/architecture-design

上手步骤

4 步
  1. 1

    确认自己的宿主工具

    公开资料标注支持 Codex、Claude、Cursor、Gemini CLI;先确认自己用的是其中之一,再按对应工具的 Skills 目录放置。

  2. 2

    拿到安装命令

    可以直接复制的命令是 npx skills add https://github.com/shawnpang/startup-founder-skills --skill archi…;命令里的占位符换成自己的路径或密钥再执行。

  3. 3

    安装后重启宿主

    命令执行完要完全退出宿主工具再打开,让新装的 Skill 被重新扫描到,否则列表里可能看不到。

  4. 4

    按最小权限试用

    它需要需要联网,先在测试目录或测试账号里跑,确认没问题再放到正式项目。

常见问题

6 条

architecture-design 怎么安装?

在终端执行 npx skills add https://github.com/shawnpang/startup-founder-skills --skill architecture-de…。装完完全退出宿主工具再打开,让它重新扫描本地 Skill。

architecture-design 支持哪些 AI 工具?

公开资料标注支持 Codex、Claude、Cursor、Gemini CLI。其他工具只要能读取本地 Skill 目录,一般也能手动放进去,但要自己确认触发方式是否一致。

architecture-design 需要什么权限?

权限级别是需要联网。该 Skill 可能需要联网访问来源站点、仓库或外部 API;具体网络访问范围需要结合源码和 README 复核。

architecture-design 是免费的吗?

公开资料没有标注明确许可证,收费和商用限制都无法确认。正式使用前请到来源仓库核对授权说明。

architecture-design 用的人多吗?

公开数据是累计安装 706 次,近一周安装 30 次,下载 247 次,GitHub 115 星。这些数字来自第三方目录统计,只能当作热度参考,不代表质量或安全性。

architecture-design 安全吗?

第三方扫描结果为通过,但这只覆盖已知的静态检查项,不能替代自己读一遍源码和安装命令。

值得选的地方和要先想清楚的地方

值得选的地方

  • 同时适配 4 种工具,换客户端不用重新找替代品。
  • 第三方扫描已通过,常见的高风险行为没有命中。

先想清楚的地方

  • 许可证没有明确标注,能不能商用、能不能再分发都不确定。
  • 第三方目录整理,版本更新和行为细节以来源仓库为准。

适不适合你

更适合

  • 已经在用 Codex,想直接扩展它能力的人。
  • 需要处理前端设计类任务、又不想每次都手写提示词的人。

不太适合

  • 需要明确授权才能用到公司项目里的场景。
  • 需要厂商级技术支持和 SLA 的生产系统。

前端设计类 Skill 对比

6 个同类
Skill总安装GitHub 星权限许可证扫描
frontend-design

前端设计 · Codex、Claude

8,823,360126,072只读MIT通过
vercel-composition-patterns

Vercel 组合模式 · Codex、Claude

3,858,81625,893需要联网MIT通过
vercel-react-native-skills

Vercel React native skills 前端 · Codex、Claude

2,468,66425,878只读MIT通过
adapt

adapt 搜索 · Codex、Claude

2,027,04023,125操作浏览器未明确通过
bolder

bolder 分析 · Codex、Claude

2,004,28823,130只读未明确通过
architecture-design

建筑设计 · 本页

706115需要联网未明确通过

按安装量取同分类前几名;数字来自第三方目录统计,只作热度参考,不代表质量结论。

SKILL.md 原文

Architecture Design

When to Use

  • Starting a new product or major feature that needs system design
  • Choosing between monolith, modular monolith, microservices, or event-driven patterns
  • Selecting a database (SQL vs NoSQL vs specialized) for a new project
  • Analyzing dependencies for circular references, coupling issues, or outdated packages
  • Creating architecture diagrams (Mermaid, PlantUML, ASCII) for documentation or review
  • Writing Architecture Decision Records (ADRs) for technical choices
  • Evaluating scalability bottlenecks or planning capacity

Context Required

From startup-context: product description, tech stack, current state (prototype/beta/scaling), team size, expected scale (users, requests/sec, data volume). If missing, ask:

  • What does this system need to do? (core use cases)
  • What scale are you targeting? (users, requests/sec, data size)
  • What is your team size and backend experience level?
  • Are there hard constraints? (compliance, latency, budget, existing infra)

Workflow

  1. Gather requirements — Identify functional requirements (use cases), non-functional requirements (latency, throughput, availability, consistency), and constraints (budget, team size, compliance).
  2. Run architecture assessment — Analyze the existing project structure to detect current patterns (MVC, layered, hexagonal, microservices indicators), code organization issues (god classes, mixed concerns), and layer violations.
  3. Analyze dependencies — Examine the dependency tree for circular dependencies, coupling scores, and outdated packages across npm, Python, Go, or Rust projects.
  4. Select architecture pattern — Use the decision workflows below to match team size, deployment needs, and data boundaries to the right pattern. For most early-stage startups, recommend modular monolith.
  5. Select database — Match data characteristics, scale requirements, and consistency needs to the appropriate database technology using the selection workflow below.
  6. Design data model — Produce an ER diagram in Mermaid. Define entity ownership: which module/service writes, others read via API.
  7. Define API contracts — Specify key endpoints with method, path, request/response shapes, and error codes. Version from day one.
  8. Generate architecture diagram — Produce a Mermaid C4 or flowchart diagram showing components, data stores, external services, and communication patterns.
  9. Write ADRs — Document key decisions using the ADR format below.
  10. Identify risks — Call out single points of failure, data consistency risks, and scaling bottlenecks with mitigations.

Output Format

Deliver a structured architecture document with these sections:

  • Requirements Summary — Functional, non-functional, and constraints
  • Architecture Assessment — Detected pattern with confidence, issues, recommendations
  • System Diagram — Mermaid C4 or flowchart (component, layer, or deployment view)
  • Domain Model — Mermaid ER diagram with entity ownership
  • Module Boundaries — Table: Module, Responsibility, Owns Data, Exposes API
  • API Contracts — Key endpoints with method, path, request/response shapes
  • ADRs — Architecture Decision Records for key choices
  • Dependency Analysis — Total deps, coupling score, circular deps, outdated packages
  • Risks & Mitigations — Table: Risk, Impact, Likelihood, Mitigation

Frameworks & Best Practices

Architecture Pattern Selection

Team SizeRecommended Starting Point
1-3 developersModular monolith
4-10 developersModular monolith or service-oriented
10+ developersConsider microservices
RequirementRecommended Pattern
Rapid MVP developmentModular Monolith
Independent team deploymentMicroservices
Complex domain logicDomain-Driven Design
High read/write ratio differenceCQRS
Audit trail requiredEvent Sourcing
Third-party integrationsHexagonal / Ports & Adapters

Default for early startups: Modular monolith with clear module boundaries that can be extracted later. Microservices add operational overhead that kills small teams.

Monolith vs Microservices Checklist

Choose Monolith when: team is small (<10), domain boundaries are unclear, rapid iteration is the priority, shared database is acceptable.

Choose Microservices when: teams can own services end-to-end, independent deployment is critical, different scaling requirements per component, domain boundaries are well understood.

Hybrid approach: Start monolith. Extract a service only when a module has significantly different scaling needs, a team needs independent deployment, or technology constraints require separation.

Database Selection

Structured data with relationships or ACID needs points to SQL. Flexible/evolving schema or document-oriented data points to NoSQL. Quick reference: PostgreSQL (default for most apps), MongoDB (document store), Redis (caching/sessions), DynamoDB (serverless auto-scaling), TimescaleDB (time-series), CockroachDB/Spanner (global distribution).

ADR Format

Use five fields: Status (Proposed/Accepted/Deprecated/Superseded), Context (what prompted the decision), Decision (what was chosen and why), Consequences (trade-offs and remaining risks), Alternatives considered (what else was evaluated and why it lost).

Key Design Principles

  • Every entity has a clear owner (one module writes, others read via API)
  • Use UUIDs for primary keys if multi-service or future extraction is likely
  • Version APIs from day one (/v1/resource); paginate all list endpoints (cursor-based preferred)
  • Consistent error shapes: {"error": {"code": "...", "message": "..."}}
  • Design write operations for idempotency (idempotency keys)
  • Synchronous calls (HTTP/gRPC) for queries needing immediate confirmation; async events for notifications, analytics, and cross-service data sync
  • Avoid distributed transactions — use sagas or eventual consistency

Related Skills

  • tech-stack-eval — Chain when choosing specific technologies for the architecture
  • security-review — Chain to review the architecture for threat vectors before implementation
  • code-review — Chain after implementation to verify code matches architectural intent

Examples

Prompt: "I'm building a SaaS project management tool. 3 engineers. How should I architect it?"

Good output snippet:

Given your team of 3 and early stage, I recommend a modular monolith.
Domain modules:

1. Auth Module — user accounts, roles, sessions
2. Projects Module — workspaces, projects, permissions
3. Tasks Module — tasks, assignments, comments, activity log
4. Notifications Module — email digests, in-app notifications

Each module gets its own DB schema (auth.*, projects.*) and communicates
through internal function calls with typed interfaces — not HTTP. This
gives you service-like boundaries without deployment complexity.

Architecture Assessment:
  Detected pattern: Layered Architecture (confidence: 85%)
  ✓ controllers/  - Presentation layer
  ✓ services/     - Business logic layer
  ✓ repositories/ - Data access layer

Prompt: "Should we use WebSockets or SSE for real-time collaboration?"

Good output snippet:

## ADR-001: Use WebSockets for Real-Time Collaboration
- Status: Proposed
- Context: Document editor needs sub-200ms latency for cursor positions
  and concurrent edits across 2-50 users per document.
- Decision: WebSockets via Socket.io with Redis pub/sub for horizontal
  scaling. SSE only supports server-to-client; we need bidirectional
  communication for operational transforms.
- Consequences: Adds WebSocket infrastructure (sticky sessions or Redis
  adapter), ~2KB memory per connection. Team needs OT/CRDT knowledge.
- Alternatives: SSE + POST (simpler but higher edit latency),
  Firebase Realtime DB (vendor lock-in, cost at scale).

平台分布

Codex

32.26%
按下载量换算80

Claude

31.95%
按下载量换算79

Cursor

18.37%
按下载量换算45

Gemini CLI

9.98%
按下载量换算25

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

需要联网

该 Skill 可能需要联网访问来源站点、仓库或外部 API;具体网络访问范围需要结合源码和 README 复核。

安装前确认

本站仅展示第三方公开信息,不托管安装包,不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。目前只有一个公开来源,建议同时核对源仓库。

继续浏览同类 Skills