Japanese Personality Settings UI
Generates a clean Japanese SaaS onboarding screen for customizing communication tone and relationship settings.
Prompt
Objetivo: Criar uma tela de onboarding/configurações de web app em japonês limpa para o passo 2, exibindo o ajuste fino de uma personalidade de comunicação ou tipo de relacionamento selecionado.
Canvas: Captura de tela de desktop 16:9, fundo branco a cinza muito claro, coluna de conteúdo centralizada com cerca de 720 px de largura com margens generosas, sombras suaves, cartões arredondados, estilo de interface SaaS minimalista.
Cabeçalho: No topo central, mostre um pequeno emblema circular azul com “2” seguido pelo rótulo 「相手タイプの微調整」. Abaixo dele, coloque um título em japonês em negrito: 「選んだ人格を、あなたらしく整えましょう」. Abaixo do título, adicione um subtítulo menor em cinza: 「おすすめ設定が用意されています。こだわりたいところだけ調整しても、そのまま進んでも大丈夫です。」
Layout principal: Empilhe exatamente 4 cartões de acordeão verticalmente. Cada cartão possui um ícone de linha à esquerda, um título em japonês em negrito, uma descrição menor em cinza e um chevron à direita. Os 4 cartões são: 1) cartão fechado com ícone de pessoas, título 「友だち・家族」, descrição 「気心の知れた相手とのカジュアルなやり取り」, chevron para baixo; 2) cartão fechado com ícone de prédio, título 「社内（メンバー）」, descrição 「チームメンバーや同僚とのやり取り」, chevron para baixo; 3) cartão expandido selecionado com ícone de usuário destacado em azul, título 「社内（上司・別チーム）」, descrição 「上司や他部署のメンバーとのやり取り」, chevron para cima; 4) cartão fechado com ícone de maleta, título 「社外・取引先」, descrição 「取引先やビジネスパートナーとのやり取り」, chevron para baixo.
Detalhes do cartão expandido: Dentro do terceiro cartão, crie exatamente 6 linhas de configuração com rótulos em japonês à esquerda e controles de pílula segmentados à direita. Rótulo da linha 1 「敬体」 tem 4 opções: 「タメ口」, 「砕けた敬語」, selecionado 「丁寧敬語」, 「ビジネス敬語」. Rótulo da linha 2 「相手の呼び方」 tem 4 opções: selecionado 「〜さん」, 「〜様」, 「あだ名・呼び捨て」, 「宛名なし」. Rótulo da linha 3 「絵文字」 tem 4 opções: 「なし」, selecionado 「たまに」, 「よく」, 「相手に合わせる」. Rótulo da linha 4 「！？の量」 tem 4 opções: 「使わない」, selecionado 「たまに」, 「よく」, 「相手に合わせる」. Rótulo da linha 5 「書き出し＆締め」 tem 4 opções: 「なし」, 「定型」, selecionado 「名乗る」, 「相手に合わせる」. Rótulo da linha 6 「よく使う絵文字の手札」 mostra exatamente 9 pequenos botões de emoji quadrados seguidos por um sinal de mais: emoji de rosto sorridente selecionado, polegar para cima, brilhos, gotas de suor, dois corações, olhos, mãos levantadas, confete, rosto pensativo, então “+”.
Rodapé: Abaixo da pilha de acordeão, centralize um botão primário de gradiente azul arredondado proeminente com texto em branco 「これで作る」.
Estilo visual: Interface de produto japonesa moderna e nítida, bordas cinza claro finas, sombras sutis nos cartões, cor de destaque azul para controles selecionados e fundos de ícones ativos, títulos em preto/azul marinho escuro, texto secundário em cinza. Mantenha a composição simétrica e espaçosa. Sem elementos de navegador, sem marca d'água, sem texto extra. Use {argument name="accent color" default="bright blue"} como a cor de seleção ativa e mantenha todo o texto da interface visível em japonês.
Tradução automática — o prompt original é o que gerou este resultado.
Prompt original
Goal: Create a clean Japanese web app onboarding/settings screen for step 2, showing fine-tuning of a selected communication personality or relationship type.
Canvas: 16:9 desktop screenshot, white to very pale gray background, centered content column about 720 px wide with generous margins, soft shadows, rounded cards, minimal SaaS UI style.
Header: At the top center, show a small blue circular badge with “2” followed by the label 「相手タイプの微調整」. Under it place a bold Japanese headline: 「選んだ人格を、あなたらしく整えましょう」. Under the headline add a smaller gray subtitle: 「おすすめ設定が用意されています。こだわりたいところだけ調整しても、そのまま進んでも大丈夫です。」
Main layout: Stack exactly 4 accordion cards vertically. Each card has a left line icon, a bold Japanese title, a smaller gray description, and a chevron on the right. The 4 cards are: 1) closed card with people icon, title 「友だち・家族」, description 「気心の知れた相手とのカジュアルなやり取り」, downward chevron; 2) closed card with building icon, title 「社内（メンバー）」, description 「チームメンバーや同僚とのやり取り」, downward chevron; 3) expanded selected card with blue-highlighted user icon, title 「社内（上司・別チーム）」, description 「上司や他部署のメンバーとのやり取り」, upward chevron; 4) closed card with briefcase icon, title 「社外・取引先」, description 「取引先やビジネスパートナーとのやり取り」, downward chevron.
Expanded card details: Inside the third card, create exactly 6 setting rows with Japanese labels on the left and segmented pill controls on the right. Row 1 label 「敬体」 has 4 options: 「タメ口」, 「砕けた敬語」, selected 「丁寧敬語」, 「ビジネス敬語」. Row 2 label 「相手の呼び方」 has 4 options: selected 「〜さん」, 「〜様」, 「あだ名・呼び捨て」, 「宛名なし」. Row 3 label 「絵文字」 has 4 options: 「なし」, selected 「たまに」, 「よく」, 「相手に合わせる」. Row 4 label 「！？の量」 has 4 options: 「使わない」, selected 「たまに」, 「よく」, 「相手に合わせる」. Row 5 label 「書き出し＆締め」 has 4 options: 「なし」, 「定型」, selected 「名乗る」, 「相手に合わせる」. Row 6 label 「よく使う絵文字の手札」 shows exactly 9 small square emoji buttons followed by a plus sign: selected smiling face emoji, thumbs up, sparkles, sweat droplets, two hearts, eyes, raised hands, party popper, thinking face, then “+”.
Footer: Beneath the accordion stack, center a prominent rounded blue gradient primary button with white text 「これで作る」.
Visual style: Crisp modern Japanese product UI, thin light gray borders, subtle card shadows, blue accent color for selected controls and active icon backgrounds, black/dark navy headings, gray secondary text. Keep the composition symmetrical and spacious. No browser chrome, no watermark, no extra text. Use {argument name="accent color" default="bright blue"} as the active selection color and keep all visible UI text in Japanese.✨ Gerar Salvar Publicação original Abrir no Hitboard