메뉴
[OPTIONAL] AI-powered visual generation using Google Nano Banana Pro. For user flows, architecture diagrams, mockups.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
AID Phase 4 - Development phase. Use for implementing features, TDD practices, code reviews, transitioning from planning to QA.
AID Phase 0 - Research & discovery. Use for validating problem spaces, identifying stakeholders, defining success metrics, deciding whether to proceed.
AID Phase 3 - Implementation Planning with consolidation-first approach. Resolves contradictions between PRD and Tech Spec, creates consolidated master document, then breaks down into actionable tasks and populates Jira. Includes sprint planning and risk assessment.
AID Phase 1 - PRD creation. Use for user stories, acceptance criteria, scoping features, transitioning from discovery to tech spec.
AID Phase 5 - QA and Release. Use for validating implementations, acceptance tests, preparing releases, deployment, operational readiness.
AID Phase 2 - Technical Specification. Use for system architecture, API contracts, data models, security architecture, transitioning from PRD to implementation.
| name | nano-banana-visual |
| description | [OPTIONAL] AI-powered visual generation using Google Nano Banana Pro. For user flows, architecture diagrams, mockups. |
| optional | true |
OPTIONAL SKILL - AID works without this.
ENABLE_NANO_BANANA=true
NANO_BANANA_PROVIDER=google
GOOGLE_AI_API_KEY=your-key
| Phase | Trigger | Output |
|---|---|---|
| Discovery | "Create stakeholder map" | Diagram |
| PRD | "Create user flow" | Flow diagram |
| Tech Spec | "Create architecture" | System diagram |
| Development | "Create mockup" | Screen mockup |
const result = await client.generateFromText(`
Create user flow for checkout:
1. Cart Review
2. Shipping
3. Payment
4. Confirmation
Style: Clean, modern
`);
const result = await client.generateFromText(`
Create microservices diagram:
- Frontend: React
- API Gateway: Kong
- Services: User, Order, Payment
- Database: PostgreSQL, Redis
`);
const builder = new WireframePromptBuilder({
designSystem: 'material3',
primaryColor: '#3B82F6',
});
const prompt = builder.generateScreen({
name: 'Dashboard',
components: [
{ type: 'header', position: 'top' },
{ type: 'card', description: 'Stats' },
{ type: 'list', description: 'Activity' },
],
});
docs/visuals/
discovery/stakeholder-map.png
prd/user-flow.png
tech-spec/architecture.png
design/mockup.png
| Method | Description |
|---|---|
| generateFromText(prompt) | Image from text |
| editImage(base64, instruction) | Edit image |
| wireframeToUI(sketch, description) | Sketch to UI |
| Option | Values |
|---|---|
| aspectRatio | 1:1, 16:9, 9:16 |
| resolution | 1K, 2K, 4K |
| numImages | 1-4 |