该技能指导用户根据设计灵感创建视觉情绪板。它提供分步说明，用于提取颜色、排版和UI模式，并将其组织成文档化的设计方向。工作流程包括根据用户反馈进行迭代优化，最终形成可供实施的设计系统。
Dify工作流需通过三重反引号包裹标准JSON格式artifact块（如code、table）输出结构化内容，经MCP客户端（如Cherry Studio）解析渲染为可交互元素；必须确保上游输出为校验通过的JSON字符串，且启用MCP服务并正确配置客户端。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你想让Dify工作流输出带可交互元素（如代码块、表格、图表预览）的结构化响应，类似Claude Artifacts那种点击展开、复制、运行的页面效果，但Dify原生不渲染HTML或提供前端交互层——必须靠后端节点输出符合规范的标记，并由支持渲染的MCP客户端（如Cherry Studio、Claude Desktop）解析展示。
第一步：在Dify中配置Workflow节点输出标准Markdown+Artifact标记
进入已建好的Workflow编辑页，在最终“回复”类节点（如Text Generation或LLM节点）的提示词末尾，强制插入三重反引号包裹的artifact声明：
{\n "type": "code",\n "language": "python",\n "content": "{{final_code_output}}"\n}
注意：content字段必须是纯字符串变量，不能含换行或未转义双引号；若输出多段内容，需用多个独立```artifact块分隔，每个块之间至少空一行。否则Cherry Studio会跳过整个块解析。
这一步不可省略——没有```artifact包裹，客户端一律当作普通文本，不会触发交互式渲染。
第二步：确保输出内容被正确注入到artifact JSON中
方法一：用Text Generation节点做最终封装
在流程末端添加一个Text Generation节点，输入模板为：
{\n "type": "code",\n "language": "{{lang}}",\n "content": "{{raw_content}}"\n}\n\n
{\n "type": "table",\n "headers": {{table_headers}},\n "rows": {{table_rows}}\n}
其中{{lang}}、{{raw_content}}等变量必须来自上游节点的明确输出字段，且上游节点输出必须是JSON格式字符串（例如LLM节点启用“强制输出JSON”并设output_schema），否则变量为空导致artifact结构损坏。
【关键前提】上游所有待注入字段必须已通过JSON Schema校验，不能是自由文本。自由文本中的换行、引号、反斜杠会直接破坏artifact块语法，使客户端静默丢弃该块。
第三步：发布为MCP服务器并配置客户端识别
1. 进入Workflow设置页 → 向下滚动至“MCP服务”区域 → 开启“启用MCP服务”开关
2. 填写服务描述：用一句话精准说明用途，例如“生成可执行Python代码与结构化分析表格的交互式响应”
3. 保存后复制MCP服务地址（形如http://your-dify-host:5001/mcp/server/workflow/xxx）
4. 在Cherry Studio中：Settings → Tools → Add Tool → 选择“MCP Server” → 粘贴地址 → Test Connection
测试成功后，该Workflow将出现在工具列表中，用户提问时模型会自动决定是否调用——调用后返回的```artifact块将被Cherry Studio原生渲染为可折叠、可复制、可运行（如code类型）的交互区块。
