CommunityImagemgithub.com

Blueprint de Cristas Rikyu

Converta imagens, fotos, estátuas, animais ou conceitos de design em pôsteres de blueprint de cristas geométricas estilo Rikyu e construção de kamon japoneses em SVG puro. Use quando o usuário enviar uma imagem para transformar em um esboço geométrico SVG, ou pedir para replicar ou criar um pôster de emblema estilo Rikyu, blueprint de logo com compasso e régua, ou ilustração de grade geométrica de proporção áurea com círculos de construção e raios tangentes estendidos.

O que é Blueprint de Cristas Rikyu?

Este skill transforma imagens de referência enviadas ou conceitos textuais em cristas heráldicas minimalistas e emblemas kamon japoneses, apresentados como folhas de construção arquitetônica com compasso e régua em SVG puro. Cada saída combina uma silhueta translúcida central sobreposta com seus círculos de construção geométrica sincronizados e raios tangentes estendidos, uma grade milimétrica em degradê, uma nota concisa do conceito de design e uma prévia do emblema sólido no canto inferior direito. Ele é acionado quando o usuário carrega uma imagem (foto, estátua, animal, objeto ou pôster de referência) e pede para convertê-la ou replicá-la como um esboço geométrico SVG ou blueprint de construção estilo Rikyu, ou quando deseja um pôster de construção geométrica, blueprint de kamon japonês ou folha de logo de proporção áurea em SVG. O skill segue etapas definidas: desconstruir a imagem ou conceito em primitivas geométricas, configurar o canvas SVG e a grade milimétrica, construir o emblema reutilizável, renderizar círculos de construção e raios estendidos sincronizados, e compor o layout editorial de cabeçalho e rodapé. Ele suporta plataformas como Claude Code, Cursor e Codex, conforme a descrição original do agente de IA.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/lzytttttt/rikyu-crest-blueprint/tree/HEAD

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

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

O que Blueprint de Cristas Rikyu faz?

Transforme imagens de referência enviadas ou conceitos textuais em cristas heráldicas minimalistas e emblemas kamon japoneses apresentados como folhas de construção arquitetônica com compasso e régua em SVG puro. Cada saída combina uma silhueta translúcida central sobreposta com seus círculos de construção geométrica sincronizados e raios tangentes estendidos, uma grade milimétrica em degradê, uma nota concisa do conceito de design e uma prévia do emblema sólido no canto inferior direito.

Recursos Inclusos

  • assets/rikyu_origami_crane_kamon.svg: Pôster SVG de referência completo demonstrando o Kamon da Garça em Voo Inspirada em Origami (crista Orizuru e Maizuru), incluindo a grade milimétrica 10px/50px em degradê, a instanciação de dois estados <defs><g id="crest-shape">, círculos osculadores sincronizados com chamadas de raio, raios de régua estendidos, a marca de cabeçalho Rikyu e o rodapé editorial do conceito.
  • scripts/build_crane_svg.py: Script gerador Python de referência mostrando como calcular pontos finais de arco circular exatos (x = cx + r * cos(theta), y = cy + r * sin(theta)), recortes espirais contínuos verdadeiros e projeções de linhas tangentes/secantes estendidas (P1 +/- 1200 * u) a partir de um único Registro de Construção Primitiva.

Quando Usar

  • O usuário envia uma imagem (foto, estátua, animal, objeto ou pôster de referência) e pede para convertê-la ou replicá-la como um esboço geométrico SVG ou blueprint de construção estilo Rikyu.
  • O usuário deseja um pôster de construção geométrica estilo Rikyu, blueprint de kamon japonês ou folha de logo de proporção áurea em SVG.
  • O usuário pede para projetar um animal, criatura mitológica, motivo botânico ou símbolo abstrato com linhas e círculos de construção visíveis de compasso e régua.

Passos

1. Desconstruir a Imagem ou Conceito de Entrada em Primitivas Geométricas

Antes de escrever caminhos SVG, extraia o esqueleto matemático subjacente da imagem ou assunto enviado:

  • Selecionar Arquétipo de Moldura:

    • Kamon Circular Fechado: Envolva o assunto dentro de um anel circular externo (r="165" a r="185"), ideal para motivos com asas, enrolados, giratórios ou rotacionais (como o kirin alado de Nihonbashi ou a garça em voo de origami em assets/rikyu_origami_crane_kamon.svg).
    • Crista Heráldica Autônoma: Ancore o assunto em uma forte linha de base horizontal (y="120" em relação ao centro) e construa em torno de um eixo diagonal dominante, ideal para bestas em pé, estátuas ou formas arquitetônicas (como o leão rugindo sobre uma rocha).
  • Destilar em Massas Planas Mínimas: Converta sombreamento fotográfico e texturas complexas em 4 a 8 ilhas de silhueta geométrica plana de alto contraste separadas por canais de espaço negativo uniformes (largura de 6px a 10px em escala total) em vez de linhas de esboço internas.

  • Construir um Registro de Construção Primitiva: Defina cada curva de contorno primária usando arcos circulares explícitos (cx, cy, r) e cada borda reta, linha de base ou eixo de postura usando pontos finais de linha (x1, y1, x2, y2) em um espaço de coordenadas local centrado em (0, 0) abrangendo [-185, 185]. Registre essas coordenadas primeiro para que o <path> da silhueta e a sobreposição de construção compartilhem geometria idêntica.

2. Configurar o Canvas SVG e a Grade Milimétrica em Degradê

Use uma proporção de pôster vertical (viewBox="0 0 800 1000"):

  • Tokens de Cor:

    • Papel de fundo: #F4F1EA
    • Sub-grade (10px): #E2DDD3 (stroke-width="0.6")
    • Grade principal (50px): #D2CCC0 (stroke-width="0.9")
    • Moldura externa e linhas finas de borda da prévia: #C6C0B4 (stroke-width="1")
    • Motivo central translúcido: fill="#8C877E" fill-opacity="0.38" stroke="#4A463F" stroke-width="1.25"
    • Círculos de construção e raios estendidos: stroke="#5C574F" stroke-width="0.75" stroke-opacity="0.72"
    • Emblema final sólido e marca de cabeçalho: #3A3631
    • Texto do corpo do conceito: #6E6A63
  • Máscara de Degradê da Grade: Aplique uma máscara <linearGradient> (y1="0" a y2="1") à camada da grade para que a grade milimétrica cubra a área superior do blueprint (y="40" a y="740") e desapareça suavemente no fundo de papel liso entre y="640" e y="750".

3. Construir o Emblema Reutilizável <g id="crest-shape">

Defina a geometria do emblema dentro de <defs> como <g id="crest-shape"> centralizado em (0, 0) para que possa ser instanciado duas vezes sem desvio geométrico:

  1. Instância Central do Blueprint: Instancie via <use href="#crest-shape" transform="translate(400, 385)" fill="#8C877E" fill-opacity="0.38" stroke="#4A463F" stroke-width="1.25"/>.
  2. Instância do Emblema Final no Canto Inferior Direito: Instancie dentro da caixa de prévia via <use href="#crest-shape" transform="translate(660, 860) scale(0.32)" fill="#3A3631" stroke="none"/>.

Construa todos os elementos <path> usando comandos de arco circular exatos (A r r 0 large-arc-flag sweep-flag x y) e segmentos retos (L x y) calculados diretamente do Registro de Construção Primitiva (x = cx + r * cos(theta), y = cy + r * sin(theta)). Use caminhos compostos (fill-rule="evenodd") ou recortes <mask> para canais de espaço negativo e espirais internas para que tanto o estado central translúcido quanto a prévia sólida sejam renderizados limparmente.

4. Renderizar Círculos de Construção Sincronizados e Raios Estendidos

Recorte toda a geometria de construção para a moldura interna (<clipPath id="blueprint-clip"><rect x="40" y="40" width="720" height="720"/></clipPath>) e agrupe-os sob transform="translate(400, 385)":

  • Círculos de Construção Osculadores: Para cada arco circular no Registro de Construção Primitiva (tipicamente 14 a 24 círculos com raios de r="10" a r="240"), desenhe <circle cx="..." cy="..." r="..." fill="none" stroke="#5C574F" stroke-width="0.82" stroke-opacity="0.76"/>.
  • Mira Central e Chamadas de Raio: Em cada centro de círculo (cx, cy), renderize uma mira de 7px (M cx-3.5 cy H cx+3.5 M cx cy-3.5 V cy+3.5) com stroke="#4A463F" stroke-width="0.85", e adicione linhas de chamada de raio horizontais ((cx, cy) a (cx+r, cy)) com um pequeno traço vertical de 6px em círculos primários chave.
  • Raios Secantes e Tangentes Estendidos: Para cada borda reta, linha de base e eixo de postura primário (tipicamente 12 a 20 linhas), projete o vetor de direção da linha (dx, dy) por todo o canvas (P1 - 1200 * u a P1 + 1200 * u, onde u é o vetor unitário) para que clip-path="url(#blueprint-clip)" apare cada raio limparmente na borda da moldura.

5. Compor o Layout Editorial do Cabeçalho e Rodapé

  • Moldura Externa: Desenhe <rect x="40" y="40" width="720" height="920" fill="none" stroke="#C6C0B4" stroke-width="1"/>.

  • Cabeçalho Superior (y="85"): Centralize o ícone de silhueta minimalista e o título da marca em serifa (Rikyu por padrão, ou título especificado pelo usuário) em torno de x="400".

  • Bloco de Conceito no Canto Inferior Esquerdo (x="76", y="810") :

    • Renderize CONCEITO em sans-serif maiúsculo (font-size="13", letter-spacing="2.8", font-weight="600", fill="#4A463F").
    • Abaixo (y="846"), coloque 3 a 4 linhas de <text> explicando como a postura da imagem enviada, o eixo primário e as massas geométricas planas foram destiladas no emblema (em chinês, japonês ou inglês, de acordo com a preferência do usuário).
  • Caixa de Prévia no Canto Inferior Direito:

    • Desenhe o quadrado inscrito <rect x="560" y="760" width="200" height="200" fill="#F4F1EA" stroke="#C6C0B4" stroke-width="1"/>.
    • Renderize o sólido escalado #crest-shape centralizado em (660, 860).

Armadilhas

  • Nunca desenhe círculos decorativos arbitrários: Cada círculo de construção e raio estendido deve ser matematicamente tangente ou secante a uma curva ou borda real da silhueta. Derive os pontos finais do arco do caminho diretamente de (cx, cy, r) para que os círculos de construção se ajustem com precisão aos contornos da silhueta.
  • Evite traços opacos da cor do papel dentro de grupos translúcidos: Se você usar traços #F4F1EA para esculpir espaço negativo, aplicar fill-opacity="0.38" ao grupo revelará o traço sobre a grade. Em vez disso, use ilhas de caminho fechado separadas, caminhos compostos (fill-rule="evenodd") ou uma <mask> SVG para canais de espaço negativo.
  • Mantenha largura legível do espaço negativo e equilíbrio de fundo aberto: Mantenha lacunas entre 6px e 10px em escala total ([-185, 185]) para que não se fechem quando reduzidas para 0.32 na caixa de prévia do canto inferior direito, e preserve espaço negativo aberto generoso ao redor da cabeça e cauda para que o emblema seja lido como uma crista icônica em vez de uma roda radial.

Habilidades Relacionadas