본문으로 건너뛰기
cccskills
무료GitHub에 공개

nano-banana-visual

[OPTIONAL] AI-powered visual generation using Google Nano Banana Pro. For user flows, architecture diagrams, mockups.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(3)

  • SKILL.md1.8 KB
  • references/prompt-library.md9.6 KB
  • SKILL.extended.md5.5 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Nano Banana Pro Visual Integration

OPTIONAL SKILL - AID works without this. Apply only when a visual artifact is requested (see When to Use); otherwise skip.

Setup

ENABLE_NANO_BANANA=true
NANO_BANANA_PROVIDER=google
GOOGLE_AI_API_KEY=your-key

When to Use

PhaseTriggerOutput
Discovery"Create stakeholder map"Diagram
PRD"Create user flow"Flow diagram
Tech Spec"Create architecture"System diagram
Development"Create mockup"Screen mockup

Quick Start

Text prompt (user flow, architecture, infographic):

const result = await client.generateFromText(`
Create user flow for checkout:
1. Cart Review
2. Shipping
3. Payment
4. Confirmation

Style: Clean, modern
`);

Screen mockup:

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' },
  ],
});

Ready-made prompt bodies per phase: references/prompt-library.md

File Organization

docs/visuals/
  discovery/stakeholder-map.png
  prd/user-flow.png
  tech-spec/architecture.png
  design/mockup.png

API Methods

MethodDescription
generateFromText(prompt)Image from text
editImage(base64, instruction)Edit image
wireframeToUI(sketch, description)Sketch to UI

Options

OptionValues
aspectRatio1:1, 16:9, 9:16
resolution1K, 2K, 4K
numImages1-4

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

AID Phase 4 - Development phase. Use for implementing features, TDD practices, code reviews, transitioning from planning to QA.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

ilandahan/AID102026년 9월 23일 업데이트

AID Phase 0 - Research & discovery. Use for validating problem spaces, identifying stakeholders, defining success metrics, deciding whether to proceed.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

ilandahan/AID102026년 9월 23일 업데이트

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

ilandahan/AID102026년 9월 23일 업데이트

aid-prd

무료

AID Phase 1 - PRD creation. Use for user stories, acceptance criteria, scoping features, transitioning from discovery to tech spec.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

ilandahan/AID102026년 9월 23일 업데이트

AID Phase 5 - QA and Release. Use for validating implementations, acceptance tests, preparing releases, deployment, operational readiness.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

ilandahan/AID102026년 9월 23일 업데이트

AID Phase 2 - Technical Specification. Use for system architecture, API contracts, data models, security architecture, transitioning from PRD to implementation.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

ilandahan/AID102026년 9월 23일 업데이트

ilandahan의 스킬 모두 보기

이 스킬의 문제 신고