任意の LLM モデルを使用して AI 駆動型の UX/UI プロトタイプ名を生成(テンプレート)
中級
これはContent Creation, Miscellaneous, Multimodal AI分野の自動化ワークフローで、9個のノードを含みます。主にCode, Webhook, Agent, RespondToWebhook, LmChatOpenAiなどのノードを使用。 OpenAI を使用して UX/UI プロトタイプの多様な名称を生成する
前提条件
- •HTTP Webhookエンドポイント(n8nが自動生成)
- •OpenAI API Key
ワークフロープレビュー
ノード接続関係を可視化、ズームとパンをサポート
ワークフローをエクスポート
以下のJSON設定をn8nにインポートして、このワークフローを使用できます
{
"id": "ENCyyiKrIdlmcYTk",
"meta": {
"instanceId": "506e1eb999b7a8cf86103921b3e1b94e371534d9bae39d44754933678dc6697d",
"templateCredsSetupCompleted": true
},
"name": "Generate AI-powered names for UX/UI mockups using any LLM model (template)",
"tags": [
{
"id": "XnTVyrQY30pP85Ic",
"name": "Personal",
"createdAt": "2025-07-07T12:25:22.847Z",
"updatedAt": "2025-07-07T12:25:22.847Z"
}
],
"nodes": [
{
"id": "9b60f8d7-3dab-4343-8d75-da64a798e273",
"name": "メインテンプレート説明",
"type": "n8n-nodes-base.stickyNote",
"position": [
-1136,
256
],
"parameters": {
"width": 700,
"height": 1316,
"content": "# Description\n---\n\nThis n8n template demonstrates how to build an AI-powered name generator that creates realistic names perfect for UX/UI designers, developers, and content creators.\n\n**Use cases:** User persona creation, mockup development, prototype testing, customer testimonials, team member listings, app interface examples, website content, accessibility testing, and any scenario requiring realistic placeholder names.\n\n## How it works\n- **AI-Powered Generation:** Uses any LLM to generate names based on your specifications\n- **Customizable Parameters:** Accepts gender preferences, name count, and optional reference names for style matching\n- **UX/UI Optimized:** Names are specifically chosen to work well in design mockups and prototypes\n- **Smart Formatting:** Returns clean JSON arrays ready for integration with design tools and applications\n- **Reference Matching:** Can generate names similar in style to a provided reference name\n\n## How to set up\n1. Replace \"Dummy LLM API\" credentials with your preferred language model API key\n2. Update webhook path and authentication as needed for your application\n3. Test with different parameters: gender (masculine/feminine/neutral), count (1-20), reference_name (optional)\n4. Integrate webhook URL with your design tools, Bubble apps, or other platforms\n\n## Requirements\n- LLM API access (OpenAI, Claude, or other language model)\n- n8n instance (cloud or self-hosted)\n- Platform capable of making HTTP POST requests\n\n## API Usage\nPOST to webhook with JSON body:\n```json\n{\n \"gender\": \"masculine\",\n \"count\": 5,\n \"reference_name\": \"Alex Chen\" // optional\n}\n```\n\nResponse:\n```json\n{\n \"success\": true,\n \"names\": [\"Marcus Johnson\", \"David Kim\", \"Sofia Rodriguez\", \"Chen Wei\", \"James Wilson\"],\n \"count\": 5\n}\n```\n\n## How to customize\n- Modify AI prompt for specific naming styles or regions\n- Add additional parameters (age, profession, cultural background)\n- Connect to databases for persistent name storage\n- Integrate with design tools APIs (Figma, Sketch, Adobe XD)\n- Create batch processing for large mockup projects"
},
"typeVersion": 1
},
{
"id": "feb931d7-b708-4d4c-8477-3b2ed547263d",
"name": "Webhook入力ノート",
"type": "n8n-nodes-base.stickyNote",
"position": [
-304,
272
],
"parameters": {
"color": 4,
"width": 400,
"height": 128,
"content": "## Webhook Input Processing\n\nReceives parameters: gender, count, reference_name (optional)"
},
"typeVersion": 1
},
{
"id": "e1c1a53b-2f3e-44e8-ade2-d66e90da4d0d",
"name": "AI生成ノート",
"type": "n8n-nodes-base.stickyNote",
"position": [
176,
272
],
"parameters": {
"color": 3,
"width": 400,
"height": 128,
"content": "## AI Name Generation\n\nGenerates names using OpenAI with specialized UX/UI prompting"
},
"typeVersion": 1
},
{
"id": "b958e180-b34f-4d77-bc0a-82e65133ef4f",
"name": "レスポンスフォーマットノート",
"type": "n8n-nodes-base.stickyNote",
"position": [
656,
272
],
"parameters": {
"color": 5,
"width": 400,
"height": 128,
"content": "## Response Formatting\n\nCleans and formats names into structured JSON array for easy integration"
},
"typeVersion": 1
},
{
"id": "4deb7a89-e0bc-48c8-bca2-12cbb1f00fc1",
"name": "Webhookトリガー(名称リクエスト)",
"type": "n8n-nodes-base.webhook",
"position": [
-112,
432
],
"webhookId": "generate-names",
"parameters": {
"path": "generate-names",
"options": {},
"httpMethod": "POST",
"responseMode": "responseNode"
},
"typeVersion": 2
},
{
"id": "6a42f135-a198-4da6-b588-5f3f373b9e7d",
"name": "AI名称生成エージェント",
"type": "@n8n/n8n-nodes-langchain.agent",
"position": [
240,
432
],
"parameters": {
"text": "={{ $json.body.reference_name ? \n 'Generate ' + $json.body.count + ' ' + $json.body.gender + ' names similar in style to: \"' + $json.body.reference_name + '\"' \n : 'Generate ' + $json.body.count + ' random ' + $json.body.gender + ' names' }}",
"options": {
"systemMessage": "=Current date and time: {{$now}}\n\n# Overview\nYou are a UX/UI naming expert who generates diverse, realistic names that designers use in mockups, personas, prototypes, and user interface examples.\n\n# Task\nGenerate culturally diverse names from all continents that UX/UI designers would use in their work. Names should be:\n- Realistic and professional\n- Culturally authentic and respectful\n- Suitable for user personas, mockups, and prototypes\n- Representative of global diversity\n- Easy to pronounce and remember\n\n## Name Distribution by Region\nInclude names from:\n- **North America**: English, Spanish, French Canadian, Indigenous\n- **South America**: Spanish, Portuguese, Indigenous variants\n- **Europe**: Nordic, Germanic, Romance, Slavic, Celtic\n- **Africa**: West African, East African, North African, South African\n- **Asia**: East Asian, Southeast Asian, South Asian, Middle Eastern\n- **Oceania**: Australian, Polynesian, Melanesian, Micronesian\n\n## UX/UI Context Examples\nNames should work well in:\n- User persona profiles\n- Customer testimonials in mockups\n- User account examples\n- Team member listings\n- Contact forms and directories\n- App user interfaces\n- Website testimonials\n\n## Output Format\n- Generate exactly {{ $json.body.count }} names\n- Return ONLY names, one per line\n- \"First Last\" format\n- NO numbering or extra text\n- Ensure continental diversity across the full list\n\nExample output:\nChen Wei-Ming\nSofia Andersson\nRaj Patel\nIsabella Rodriguez"
},
"promptType": "define"
},
"typeVersion": 2
},
{
"id": "1408c494-f7f0-4223-affd-44b1eeae6790",
"name": "OpenAI GPT-4.1 Mini",
"type": "@n8n/n8n-nodes-langchain.lmChatOpenAi",
"position": [
64,
656
],
"parameters": {
"model": {
"__rl": true,
"mode": "list",
"value": "gpt-4.1-mini"
},
"options": {
"maxTokens": 150,
"temperature": 0.7
}
},
"credentials": {
"openAiApi": {
"id": "mvWns3smwtPV0N7O",
"name": "Dummy OpenAI"
}
},
"typeVersion": 1.2
},
{
"id": "8fd94983-793e-418c-90ab-5955b92d5578",
"name": "名称結果のフォーマット",
"type": "n8n-nodes-base.code",
"position": [
656,
432
],
"parameters": {
"jsCode": "// Get the AI output\nconst aiOutput = $input.first().json.output || $input.first().json.text;\n\nconsole.log('Raw AI Output:', aiOutput);\n\nif (!aiOutput) {\n return {\n json: {\n success: false,\n error: \"No output from AI\",\n names: []\n }\n };\n}\n\n// Split the names into an array\nlet names = [];\n\ntry {\n // Split by lines and clean up\n names = aiOutput.toString()\n .split('\\n')\n .map(line => line.trim())\n .filter(line => line.length > 0)\n .map(line => {\n // Remove numbering if present (1. 2. etc.)\n let cleaned = line.replace(/^\\d+[\\.\\)]\\s*/, '');\n return cleaned.trim();\n })\n .filter(name => name.length > 0 && name.length < 50); // Filter out overly long responses\n \n} catch (error) {\n console.error('Error parsing names:', error);\n return {\n json: {\n success: false,\n error: \"Failed to parse names\",\n names: []\n }\n };\n}\n\n// Return structured response for easy integration\nreturn {\n json: {\n success: true,\n names: names,\n count: names.length,\n generated_at: new Date().toISOString(),\n request_params: {\n gender: $('Webhook Trigger (Name Request)').item.json.body.gender,\n requested_count: $('Webhook Trigger (Name Request)').item.json.body.count,\n reference_name: $('Webhook Trigger (Name Request)').item.json.body.reference_name || null\n }\n }\n};"
},
"typeVersion": 2
},
{
"id": "a0544c45-089c-4f97-8a59-12ea041fa84b",
"name": "名称レスポンス返却",
"type": "n8n-nodes-base.respondToWebhook",
"position": [
928,
432
],
"parameters": {
"options": {},
"respondWith": "json",
"responseBody": "={{ $json }}"
},
"typeVersion": 1.4
}
],
"active": false,
"pinData": {},
"settings": {
"executionOrder": "v1"
},
"versionId": "26e8803f-c519-494c-867c-6e88ebdf6553",
"connections": {
"8fd94983-793e-418c-90ab-5955b92d5578": {
"main": [
[
{
"node": "a0544c45-089c-4f97-8a59-12ea041fa84b",
"type": "main",
"index": 0
}
]
]
},
"1408c494-f7f0-4223-affd-44b1eeae6790": {
"ai_languageModel": [
[
{
"node": "6a42f135-a198-4da6-b588-5f3f373b9e7d",
"type": "ai_languageModel",
"index": 0
}
]
]
},
"6a42f135-a198-4da6-b588-5f3f373b9e7d": {
"main": [
[
{
"node": "8fd94983-793e-418c-90ab-5955b92d5578",
"type": "main",
"index": 0
}
]
]
},
"4deb7a89-e0bc-48c8-bca2-12cbb1f00fc1": {
"main": [
[
{
"node": "6a42f135-a198-4da6-b588-5f3f373b9e7d",
"type": "main",
"index": 0
}
]
]
}
}
}よくある質問
このワークフローの使い方は?
上記のJSON設定コードをコピーし、n8nインスタンスで新しいワークフローを作成して「JSONからインポート」を選択、設定を貼り付けて認証情報を必要に応じて変更してください。
このワークフローはどんな場面に適していますか?
中級 - コンテンツ作成, その他, マルチモーダルAI
有料ですか?
このワークフローは完全無料です。ただし、ワークフローで使用するサードパーティサービス(OpenAI APIなど)は別途料金が発生する場合があります。
関連ワークフロー
バッチSEOコンテンツ生成とAI画像付きWebflowドラフト作成(テンプレート)
GPT、Gemini画像、Webflowデラフトで行う大量SEOコンテンツ生成
If
Set
Code
+
If
Set
Code
54 ノードDahiana
コンテンツ作成
YouTube Transcript API を使って YouTube 動画 の 字幕 を抽出
Google SheetsまたはAPIウェブフックを使ってYouTubeの字幕を抽出
Code
Webhook
Http Request
+
Code
Webhook
Http Request
13 ノードDahiana
市場調査
コンテンツジェネレーター
GPT-4 モデルの戦略の方法を採用した AI によるソーシャルメディアコンテンツ生成ツール
Set
Code
Webhook
+
Set
Code
Webhook
22 ノードinderjeet Bhambra
コンテンツ作成
OpenAI・LangChain・アピ業間連携によるワークフレーム自動化入門ガイド
OpenAI、LangChain、API を使用したワークフロー自動化の初心者ガイド
If
Set
Code
+
If
Set
Code
33 ノードMeelioo
コンテンツ作成
💥 VEO 3を使ってAIウイルス動画を生成してTikTokにアップロード
VEO 3でAIウイルスビデオを生成し、TikTokにアップロード
Set
Code
Wait
+
Set
Code
Wait
24 ノードDr. Firas
コンテンツ作成
UIをベースにGPT-4とDALL-Eを用いてLinkedInコンテンツ生成を自動化
AIベースのLinkedInコンテンツジェネレーター(OpenAI GPT-4およびDALL-E)
Webhook
Http Request
Agent
+
Webhook
Http Request
Agent
23 ノードWeWeb
コンテンツ作成
ワークフロー情報
難易度
中級
ノード数9
カテゴリー3
ノードタイプ6
作成者
Dahiana
@mssportoNo-Code Specialist with more than 10 years of experience in Digital Marketing. Currently working with Bubble. Webflow, AI, Agents and N8N.
外部リンク
n8n.ioで表示 →
このワークフローを共有