[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-NoviScl--Design2Code":3,"tool-NoviScl--Design2Code":61},[4,18,26,36,44,53],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":17},4358,"openclaw","openclaw\u002Fopenclaw","OpenClaw 是一款专为个人打造的本地化 AI 助手，旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚，能够直接接入你日常使用的各类通讯渠道，包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息，OpenClaw 都能即时响应，甚至支持在 macOS、iOS 和 Android 设备上进行语音交互，并提供实时的画布渲染功能供你操控。\n\n这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地，用户无需依赖云端服务即可享受快速、私密的智能辅助，真正实现了“你的数据，你做主”。其独特的技术亮点在于强大的网关架构，将控制平面与核心助手分离，确保跨平台通信的流畅性与扩展性。\n\nOpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者，以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力（支持 macOS、Linux 及 Windows WSL2），即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你",349277,3,"2026-04-06T06:32:30",[13,14,15,16],"Agent","开发框架","图像","数据工具","ready",{"id":19,"name":20,"github_repo":21,"description_zh":22,"stars":23,"difficulty_score":10,"last_commit_at":24,"category_tags":25,"status":17},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,"2026-04-05T11:01:52",[14,15,13],{"id":27,"name":28,"github_repo":29,"description_zh":30,"stars":31,"difficulty_score":32,"last_commit_at":33,"category_tags":34,"status":17},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",160784,2,"2026-04-19T11:32:54",[14,13,35],"语言模型",{"id":37,"name":38,"github_repo":39,"description_zh":40,"stars":41,"difficulty_score":32,"last_commit_at":42,"category_tags":43,"status":17},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",109154,"2026-04-18T11:18:24",[14,15,13],{"id":45,"name":46,"github_repo":47,"description_zh":48,"stars":49,"difficulty_score":32,"last_commit_at":50,"category_tags":51,"status":17},6121,"gemini-cli","google-gemini\u002Fgemini-cli","gemini-cli 是一款由谷歌推出的开源 AI 命令行工具，它将强大的 Gemini 大模型能力直接集成到用户的终端环境中。对于习惯在命令行工作的开发者而言，它提供了一条从输入提示词到获取模型响应的最短路径，无需切换窗口即可享受智能辅助。\n\n这款工具主要解决了开发过程中频繁上下文切换的痛点，让用户能在熟悉的终端界面内直接完成代码理解、生成、调试以及自动化运维任务。无论是查询大型代码库、根据草图生成应用，还是执行复杂的 Git 操作，gemini-cli 都能通过自然语言指令高效处理。\n\n它特别适合广大软件工程师、DevOps 人员及技术研究人员使用。其核心亮点包括支持高达 100 万 token 的超长上下文窗口，具备出色的逻辑推理能力；内置 Google 搜索、文件操作及 Shell 命令执行等实用工具；更独特的是，它支持 MCP（模型上下文协议），允许用户灵活扩展自定义集成，连接如图像生成等外部能力。此外，个人谷歌账号即可享受免费的额度支持，且项目基于 Apache 2.0 协议完全开源，是提升终端工作效率的理想助手。",100752,"2026-04-10T01:20:03",[52,13,15,14],"插件",{"id":54,"name":55,"github_repo":56,"description_zh":57,"stars":58,"difficulty_score":10,"last_commit_at":59,"category_tags":60,"status":17},4487,"LLMs-from-scratch","rasbt\u002FLLMs-from-scratch","LLMs-from-scratch 是一个基于 PyTorch 的开源教育项目，旨在引导用户从零开始一步步构建一个类似 ChatGPT 的大型语言模型（LLM）。它不仅是同名技术著作的官方代码库，更提供了一套完整的实践方案，涵盖模型开发、预训练及微调的全过程。\n\n该项目主要解决了大模型领域“黑盒化”的学习痛点。许多开发者虽能调用现成模型，却难以深入理解其内部架构与训练机制。通过亲手编写每一行核心代码，用户能够透彻掌握 Transformer 架构、注意力机制等关键原理，从而真正理解大模型是如何“思考”的。此外，项目还包含了加载大型预训练权重进行微调的代码，帮助用户将理论知识延伸至实际应用。\n\nLLMs-from-scratch 特别适合希望深入底层原理的 AI 开发者、研究人员以及计算机专业的学生。对于不满足于仅使用 API，而是渴望探究模型构建细节的技术人员而言，这是极佳的学习资源。其独特的技术亮点在于“循序渐进”的教学设计：将复杂的系统工程拆解为清晰的步骤，配合详细的图表与示例，让构建一个虽小但功能完备的大模型变得触手可及。无论你是想夯实理论基础，还是为未来研发更大规模的模型做准备",90106,"2026-04-06T11:19:32",[35,15,13,14],{"id":62,"github_repo":63,"name":64,"description_en":65,"description_zh":66,"ai_summary_zh":67,"readme_en":68,"readme_zh":69,"quickstart_zh":70,"use_case_zh":71,"hero_image_url":72,"owner_login":73,"owner_name":74,"owner_avatar_url":75,"owner_bio":76,"owner_company":65,"owner_location":65,"owner_email":65,"owner_twitter":65,"owner_website":65,"owner_url":77,"languages":78,"stars":91,"forks":92,"last_commit_at":93,"license":94,"difficulty_score":10,"env_os":95,"env_gpu":96,"env_ram":95,"env_deps":97,"category_tags":104,"github_topics":65,"view_count":32,"oss_zip_url":65,"oss_zip_packed_at":65,"status":17,"created_at":106,"updated_at":107,"faqs":108,"releases":149},9650,"NoviScl\u002FDesign2Code","Design2Code",null,"Design2Code 是由斯坦福大学 NLP 实验室推出的开源项目，旨在探索并推动前端工程的自动化进程。它的核心功能是将网页设计截图直接转换为可运行的 HTML 代码，从而解决传统前端开发中从视觉设计到代码实现耗时费力、重复性高的问题。\n\n该项目不仅提供了一个包含 484 个真实世界网页样本的基准数据集，还特别构建了\"Design2Code-Hard\"子集，收录了 80 个高难度案例，用于挑战当前最先进多模态大模型在复杂用户界面生成上的能力极限。此外，团队开源了自研的 Design2Code-18B 模型，并提供了完整的评估代码及针对 GPT-4o、Gemini Pro Vision、Claude 3.5 等主流模型的多模态提示实验框架。\n\nDesign2Code 非常适合 AI 研究人员用来评估和对比不同视觉语言模型在前端生成任务上的表现，也适合开发者参考其数据构建与微调流程，以优化自身的代码生成工作流。对于希望了解“设计即代码”技术边界的设计师和技术决策者而言，它同样是一个极具价值的参考资源。通过开放数据、模型权重及评估工具，Design2Code 为社区提供了一个透明、可复现的","Design2Code 是由斯坦福大学 NLP 实验室推出的开源项目，旨在探索并推动前端工程的自动化进程。它的核心功能是将网页设计截图直接转换为可运行的 HTML 代码，从而解决传统前端开发中从视觉设计到代码实现耗时费力、重复性高的问题。\n\n该项目不仅提供了一个包含 484 个真实世界网页样本的基准数据集，还特别构建了\"Design2Code-Hard\"子集，收录了 80 个高难度案例，用于挑战当前最先进多模态大模型在复杂用户界面生成上的能力极限。此外，团队开源了自研的 Design2Code-18B 模型，并提供了完整的评估代码及针对 GPT-4o、Gemini Pro Vision、Claude 3.5 等主流模型的多模态提示实验框架。\n\nDesign2Code 非常适合 AI 研究人员用来评估和对比不同视觉语言模型在前端生成任务上的表现，也适合开发者参考其数据构建与微调流程，以优化自身的代码生成工作流。对于希望了解“设计即代码”技术边界的设计师和技术决策者而言，它同样是一个极具价值的参考资源。通过开放数据、模型权重及评估工具，Design2Code 为社区提供了一个透明、可复现的研究平台，助力前端自动化技术的持续演进。","# Design2Code: How Far Are We From Automating Front-End Engineering?\n\nQuick Links:\n[[Dataset]](https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FSALT-NLP\u002FDesign2Code-hf) \n[[Model Checkpoint]](https:\u002F\u002Fhuggingface.co\u002FSALT-NLP\u002FDesign2Code-18B-v0) \n[[Project Page]](https:\u002F\u002Fsalt-nlp.github.io\u002FDesign2Code\u002F)\n[[Paper]](https:\u002F\u002Farxiv.org\u002Fabs\u002F2403.03163)\n\n## Overview\n\nThis is the official repo for our Design2Code project, maintained by the SALT lab from Stanford NLP. In this repo, we provide: \n\n- The **Design2Code** benchmark dataset for the task of converting visual design (screenshot) into code implementation, which consists of 484 real-world webpages from C4 (examples shown below).\n\n- The **Design2Code-Hard** dataset, a subset of 80 extra difficult test cases collected from Github Pages that challenges SoTA VLMs' capabilities of Web UI generation.\n\n- Code for running all automatic evaluation. \n\n- Code for running multimodal prompting experiments on GPT-4O, Gemini Pro Vision, and Claude 3.5 Model Family.\n\n- Code for finetuning and running inference on our open-source Design2Code-18B model. \n\n\n![](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FNoviScl_Design2Code_readme_7769da2d5746.png)\n\n\n\n## Set Up\n\nAll code is tested on Python 3.11. We recommend using a virtual environment to manage the dependencies.\n\nClone this repo and install the necessary libraries:\n\n```bash\npip install -e .\n```\n\nTaking screenshots and running evaluations also need to install browsers\n\n```bash\nplaywright install\n```\n\nIf the above doesn't work, try:\n\n```bash\npython3 -m playwright install\n```\n\n## Data and Predictions\n\n### Design2Code \n\nYou can download the full Design2Code testset from this [Google Drive link](https:\u002F\u002Fdrive.google.com\u002Ffile\u002Fd\u002F12uRO5EC7hkg6qAOyfJhb4YsrQ_qpL5bt\u002Fview?usp=sharing) or access it from the Huggingface dataset [page](https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FSALT-NLP\u002FDesign2Code).\n\nAfter you unzip it into `testset_final\u002F`, the folder should include 484 pairs of screenshots (`xx.png`) and corresponding HTML code (`xx.html`). We also include the placeholder image file `rick.jpg` which is used in the HTML codes.\n\n### Design2Code-HARD\nYou can download the full Design2Code-HARD testset from this [link](https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FSALT-NLP\u002FDesign2Code-HARD\u002Fresolve\u002Fmain\u002FDesign2Code-HARD.zip), or you may access it from the Huggingface dataset [page](https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FSALT-NLP\u002FDesign2Code-HARD).\n\nThe downloaded folder includes 80 pairs of screenshots (`xx.png`) and corresponding HTML code (`xx.html`). We also include the placeholder image file `rick.jpg` which is used in the HTML codes.\n\n### Taking Screenshots\n\nIn case you want to take screenshots of webpages by yourself, you can do so by running:\n\n```bash\ncd Design2Code\npython3 data_utils\u002Fscreenshot.py \n```\n\nRemember to replace the file name or directory in the script with your own. \n\n### Model Predictions\n\nTo facilitate more analysis, we also release all model predictions on our benchmark:\n\n- [GPT-4V](https:\u002F\u002Fdrive.google.com\u002Ffile\u002Fd\u002F1SgWL4E5uKVo-8D3Bj-VWvysJs_2OguA1\u002Fview?usp=sharing) (including Direct Prompting, Text-Augmented Prompting, and Self-Revision Prompting)\n- [Gemini Pro Vision](https:\u002F\u002Fdrive.google.com\u002Ffile\u002Fd\u002F18cpGdL1Yhv9UU7odcqkncDItGo0Guuy_\u002Fview?usp=sharing) (including Direct Prompting, Text-Augmented Prompting, and Self-Revision Prompting)\n- [WebSight VLM-8B](https:\u002F\u002Fdrive.google.com\u002Ffile\u002Fd\u002F1lFqLyJSDwZAEhZ4mhRqrK_-d5hhcrrEM\u002Fview?usp=sharing) (Huggingface)\n- [Design2Code-18B](https:\u002F\u002Fdrive.google.com\u002Ffile\u002Fd\u002F1XxZMeVpAGu3fGvtKetHvk2bk3vyBcj2e\u002Fview?usp=sharing) (Ours)\n- [Automatic Evaluation Results](https:\u002F\u002Fdrive.google.com\u002Ffile\u002Fd\u002F1qahQCmGqEXPXKmn2RzNwHsOI-CAQSP6P\u002Fview?usp=sharing)\n- [Human Eval - Pairwise Model Comparison](https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FSALT-NLP\u002FDesign2Code_human_eval_pairwise)\n- [Human Eval - Direct Assessment](https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FSALT-NLP\u002FDesign2Code_human_eval_reference_vs_gpt4v)\n\n## Running Prompting Experiments \n\nTo run prompting experiments, first put your OpenAI \u002F Google Gemini API keys in a file called `api_keys.json` in the root directory. It should look like this:\n\n```json\n{\n    \"organization_id\": \"\",\n    \"openai_key\": \"\",\n    \"openai_endpoint\": \"\",\n    \"gemini_api_key\": \"\"\n}\n```\n\nThen, to run GPT-4V experiments, run:\n\n```bash\nbash prompting\u002Fgpt4v.sh\n```\n\nTo run Gemini Pro Vision experiments, run:\n\n```bash\nbash prompting\u002Fgemini.sh\n```\n\nTo run Claude 3.5 Sonnet experiments, run:\n\n```bash\nbash prompting\u002Fclaude3-5.sh\n```\n\nThe bash scripts include scripts for running Direct Prompting, Text-Augmented Prompting, and Self-Revision Prompting. All prompts are written in `prompting\u002Fgpt4v.py` and `prompting\u002Fgemini.py`, you can modify it to run your own prompts or develop smarter prompting strategies. We welcome any contributions to this part of the project! \n\nAlso note that we are accessing the OpenAI API from Azure, and you might need some slight modification for directly calling the OpenAI API. \n\n### Running Inference on CogAgent-18B\n\nWe also provide code to run inference on the base model CogAgent-18B:\n\n```bash\npython3 prompting\u002Fcogagent.py\n```\n\nBe aware that the model is not finetuned on Design2Code, so the performance is very bad, often times not even producing valid HTML code.\n\n## Running Inference on Design2Code-18B\n\nThe finetuned model is based on [CogAgent](.\u002FCogVLM\u002FCogAgent_README.md), please install necessary libraries following the instructions.\n\nYou can run inference by:\n\n```bash\npython3 CogVLM\u002Ffinetune_demo\u002Finference_design2code.py\n```\n\n## Finetuning Design2Code-18B\n\nThe finetuning script is [finetune_cogagent_lora_design2code.sh](.\u002FCogVLM\u002Ffinetune_demo\u002Ffinetune_cogagent_lora_design2code.sh).\n\n## Running Automatic Evaluation\n\nYou can use the following command to run automatic evaluation:\n\n```bash\npython3 metrics\u002Fmulti_processing_eval.py\n```\n\nNote that you need to specify the directories where you store the model predictions in `metrics\u002Fmulti_processing_eval.py` (starting at line 54), like the following:\n\n```python\ntest_dirs = {\n        \"gpt4v_direct_prompting\": \"..\u002Fpredictions_final\u002Fgpt4v_direct_prompting\",\n        \"gemini_direct_prompting\": \"..\u002Fpredictions_final\u002Fgemini_direct_prompting\"\n}\n```\n\nwhere we assume each directory in the dict contains the predictions of the corresponding model\u002Fmethod (i.e., each directory should contain 484 predicted HTML files for the full test set, or for some subset that you sampled for yourself). The script will compute scores for all automatic metrics for all examples in each directory and store the results in a dictionary, with the following format:\n\n```python\n{\n    \"gpt4v_direct_prompting\": {\n        \"2.html\": [0.1, 0.2, ...],\n        \"6.html\": [0.3, 0.4, ...],\n        ...\n    },\n    \"gemini_direct_prompting\": {\n        \"2.html\": [0.5, 0.6, ...],\n        \"6.html\": [0.7, 0.8, ...],\n        ...\n    }\n}\n```\n\nwhere each list contains the fine-grained breakdown metrics. The script will also print the average scores for each model\u002Fmethod in the end, with the following format:\n\n```\ngpt4v_direct_prompting\n\nBlock-Match:  0.6240771561959276\nText:  0.9769471025300969\nPosition:  0.7787072741618328\nColor:  0.7068853534416764\nCLIP:  0.8924754858016968\n--------------------------------\n\ngemini_direct_prompting\n\nBlock-Match:  0.6697374012874602\nText:  0.9731735845969769\nPosition:  0.6502285758036523\nColor:  0.8531304981602478\nCLIP:  0.8571878373622894\n--------------------------------\n```\n\nThese metrics are also what we reported in the paper. By default, we support multiprocessing to speed up evaluation, you can also manually turn it off by setting `multiprocessing = False` on line 40.\nFor your reference, it can take up to 1 hour to run the the evaluation on the full testset (for each model\u002Fmethod). \n\n\n## Other Functions\n\n- `data_utils` contains various filtering and processing scripts that we used to construct the test data from C4. \n\n\n## License\n\nThe data, code and model checkpoint are intended and licensed for research use only. Please do not use them for any malicious purposes.\n\nThe benchmark is built on top of the C4 dataset, under the ODC Attribution License (ODC-By). \n\n\n## Acknowledgement\n\nOur testset is filtered from [C4](https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002Fc4), training examples are sampled from [Websight](https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FHuggingFaceM4\u002FWebSight). Our model is finetuned based on [CogAgent](https:\u002F\u002Fgithub.com\u002FTHUDM\u002FCogVLM). Thanks for their awsome work!\n\nIf you find our work helpful, please consider citing our paper:\n\n```\n@misc{si2024design2code,\n    title={Design2Code: How Far Are We From Automating Front-End Engineering?},\n    author={Chenglei Si and Yanzhe Zhang and Zhengyuan Yang and Ruibo Liu and Diyi Yang},\n    year={2024},\n    eprint={2403.03163},\n    archivePrefix={arXiv},\n    primaryClass={cs.CL}\n}\n```\n\nWe welcome all types of contributions to this project (PRs are welcome!). If you have any questions, please feel free to leave issues or email us.\n","# Design2Code：前端工程自动化还有多远？\n\n快速链接：\n[[数据集]](https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FSALT-NLP\u002FDesign2Code-hf) \n[[模型检查点]](https:\u002F\u002Fhuggingface.co\u002FSALT-NLP\u002FDesign2Code-18B-v0) \n[[项目页面]](https:\u002F\u002Fsalt-nlp.github.io\u002FDesign2Code\u002F)\n[[论文]](https:\u002F\u002Farxiv.org\u002Fabs\u002F2403.03163)\n\n## 概述\n\n这是由斯坦福NLP实验室SALT组维护的Design2Code项目的官方仓库。在该仓库中，我们提供了：\n\n- 用于将视觉设计（截图）转换为代码实现任务的 **Design2Code** 基准数据集，包含来自C4的484个真实世界网页（示例如下）。\n\n- **Design2Code-Hard** 数据集，是从Github Pages收集的80个额外困难测试用例的子集，旨在挑战当前最先进视觉语言模型在Web UI生成方面的能力。\n\n- 用于运行所有自动评估的代码。\n\n- 用于在GPT-4O、Gemini Pro Vision和Claude 3.5系列模型上进行多模态提示实验的代码。\n\n- 用于微调并运行我们开源的Design2Code-18B模型推理的代码。\n\n\n![](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FNoviScl_Design2Code_readme_7769da2d5746.png)\n\n\n\n## 环境搭建\n\n所有代码均在Python 3.11环境下测试通过。我们建议使用虚拟环境来管理依赖项。\n\n克隆本仓库并安装必要的库：\n\n```bash\npip install -e .\n```\n\n截取屏幕和运行评估还需要安装浏览器：\n\n```bash\nplaywright install\n```\n\n如果上述命令无法执行，请尝试：\n\n```bash\npython3 -m playwright install\n```\n\n## 数据与预测\n\n### Design2Code \n\n您可以从这个 [Google Drive链接](https:\u002F\u002Fdrive.google.com\u002Ffile\u002Fd\u002F12uRO5EC7hkg6qAOyfJhb4YsrQ_qpL5bt\u002Fview?usp=sharing) 下载完整的Design2Code测试集，或访问Huggingface数据集的[页面](https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FSALT-NLP\u002FDesign2Code)。\n\n解压到`testset_final\u002F`目录后，文件夹应包含484对截图（`xx.png`）和对应的HTML代码（`xx.html`）。我们还附带了HTML代码中使用的占位图片`rick.jpg`。\n\n### Design2Code-HARD\n您可以从这个[链接](https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FSALT-NLP\u002FDesign2Code-HARD\u002Fresolve\u002Fmain\u002FDesign2Code-HARD.zip)下载完整的Design2Code-HARD测试集，或者访问Huggingface数据集的[页面](https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FSALT-NLP\u002FDesign2Code-HARD)。\n\n下载的文件夹包含80对截图（`xx.png`）和对应的HTML代码（`xx.html`）。我们同样附带了HTML代码中使用的占位图片`rick.jpg`。\n\n### 截取屏幕\n\n如果您想自行截取网页的屏幕截图，可以运行以下命令：\n\n```bash\ncd Design2Code\npython3 data_utils\u002Fscreenshot.py \n```\n\n请记得将脚本中的文件名或目录替换为您自己的内容。\n\n### 模型预测\n\n为了便于进一步分析，我们还发布了模型在基准测试集上的所有预测结果：\n\n- [GPT-4V](https:\u002F\u002Fdrive.google.com\u002Ffile\u002Fd\u002F1SgWL4E5uKVo-8D3Bj-VWvysJs_2OguA1\u002Fview?usp=sharing)（包括直接提示、文本增强提示和自我修正提示）\n- [Gemini Pro Vision](https:\u002F\u002Fdrive.google.com\u002Ffile\u002Fd\u002F18cpGdL1Yhv9UU7odcqkncDItGo0Guuy_\u002Fview?usp=sharing)（包括直接提示、文本增强提示和自我修正提示）\n- [WebSight VLM-8B](https:\u002F\u002Fdrive.google.com\u002Ffile\u002Fd\u002F1lFqLyJSDwZAEhZ4mhRqrK_-d5hhcrrEM\u002Fview?usp=sharing)（Huggingface）\n- [Design2Code-18B](https:\u002F\u002Fdrive.google.com\u002Ffile\u002Fd\u002F1XxZMeVpAGu3fGvtKetHvk2bk3vyBcj2e\u002Fview?usp=sharing)（我们的模型）\n- [自动评估结果](https:\u002F\u002Fdrive.google.com\u002Ffile\u002Fd\u002F1qahQCmGqEXPXKmn2RzNwHsOI-CAQSP6P\u002Fview?usp=sharing)\n- [人工评估——模型两两比较](https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FSALT-NLP\u002FDesign2Code_human_eval_pairwise)\n- [人工评估——直接评分](https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FSALT-NLP\u002FDesign2Code_human_eval_reference_vs_gpt4v)\n\n## 运行提示实验\n\n要运行提示实验，首先将您的OpenAI或Google Gemini API密钥放入根目录下的`api_keys.json`文件中。文件格式如下：\n\n```json\n{\n    \"organization_id\": \"\",\n    \"openai_key\": \"\",\n    \"openai_endpoint\": \"\",\n    \"gemini_api_key\": \"\"\n}\n```\n\n然后，要运行GPT-4V实验，执行：\n\n```bash\nbash prompting\u002Fgpt4v.sh\n```\n\n要运行Gemini Pro Vision实验，执行：\n\n```bash\nbash prompting\u002Fgemini.sh\n```\n\n要运行Claude 3.5 Sonnet实验，执行：\n\n```bash\nbash prompting\u002Fclaude3-5.sh\n```\n\n这些bash脚本包含了运行直接提示、文本增强提示和自我修正提示的脚本。所有提示语都写在`prompting\u002Fgpt4v.py`和`prompting\u002Fgemini.py`中，您可以修改它们以运行自己的提示或开发更智能的提示策略。我们欢迎对该部分项目的任何贡献！ \n\n另外请注意，我们目前是从Azure访问OpenAI API的，如果您直接调用OpenAI API，可能需要做一些小的调整。\n\n### 在CogAgent-18B上运行推理\n\n我们还提供了在基础模型CogAgent-18B上运行推理的代码：\n\n```bash\npython3 prompting\u002Fcogagent.py\n```\n\n请注意，该模型并未针对Design2Code任务进行微调，因此性能非常差，往往甚至无法生成有效的HTML代码。\n\n## 在Design2Code-18B上运行推理\n\n微调后的模型基于[CogAgent](.\u002FCogVLM\u002FCogAgent_README.md)，请按照说明安装必要的库。\n\n您可以通过以下命令运行推理：\n\n```bash\npython3 CogVLM\u002Ffinetune_demo\u002Finference_design2code.py\n```\n\n## 微调Design2Code-18B\n\n微调脚本为[finetune_cogagent_lora_design2code.sh](.\u002FCogVLM\u002Ffinetune_demo\u002Ffinetune_cogagent_lora_design2code.sh)。\n\n## 运行自动评估\n\n您可以使用以下命令来运行自动评估：\n\n```bash\npython3 metrics\u002Fmulti_processing_eval.py\n```\n\n请注意，您需要在 `metrics\u002Fmulti_processing_eval.py` 文件中（从第54行开始）指定存储模型预测结果的目录，如下所示：\n\n```python\ntest_dirs = {\n        \"gpt4v_direct_prompting\": \"..\u002Fpredictions_final\u002Fgpt4v_direct_prompting\",\n        \"gemini_direct_prompting\": \"..\u002Fpredictions_final\u002Fgemini_direct_prompting\"\n}\n```\n\n其中，我们假设字典中的每个目录都包含对应模型或方法的预测结果（即，每个目录应包含针对完整测试集的484个预测HTML文件，或者您自行采样的子集）。脚本将为每个目录中的所有示例计算所有自动指标的得分，并将结果存储在一个字典中，格式如下：\n\n```python\n{\n    \"gpt4v_direct_prompting\": {\n        \"2.html\": [0.1, 0.2, ...],\n        \"6.html\": [0.3, 0.4, ...],\n        ...\n    },\n    \"gemini_direct_prompting\": {\n        \"2.html\": [0.5, 0.6, ...],\n        \"6.html\": [0.7, 0.8, ...],\n        ...\n    }\n}\n```\n\n其中，每个列表包含了细粒度的分解指标。脚本最后还会打印出每个模型或方法的平均得分，格式如下：\n\n```\ngpt4v_direct_prompting\n\n块匹配： 0.6240771561959276\n文本： 0.9769471025300969\n位置： 0.7787072741618328\n颜色： 0.7068853534416764\nCLIP： 0.8924754858016968\n--------------------------------\n\ngemini_direct_prompting\n\n块匹配： 0.6697374012874602\n文本： 0.9731735845969769\n位置： 0.6502285758036523\n颜色： 0.8531304981602478\nCLIP： 0.8571878373622894\n--------------------------------\n```\n\n这些指标也是我们在论文中报告的内容。默认情况下，我们支持多进程加速评估；您也可以通过将第40行的 `multiprocessing = False` 来手动关闭多进程功能。\n\n供您参考，对完整测试集进行评估（针对每个模型\u002F方法）可能需要长达1小时。\n\n## 其他功能\n\n- `data_utils` 包含了我们用于从C4数据集中构建测试数据的各种过滤和处理脚本。\n\n\n## 许可证\n\n本项目的数据、代码和模型检查点仅限于研究用途。请勿将其用于任何恶意目的。\n\n该基准测试基于C4数据集构建，采用ODC署名许可协议（ODC-By）。\n\n\n## 致谢\n\n我们的测试集是从[C4](https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002Fc4)中筛选得到的；训练样本则来自[HuggingFaceM4的Websight](https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FHuggingFaceM4\u002FWebSight)。我们的模型是在[CogAgent](https:\u002F\u002Fgithub.com\u002FTHUDM\u002FCogVLM)的基础上进行微调的。感谢他们出色的工作！\n\n如果您觉得我们的工作有所帮助，请考虑引用我们的论文：\n\n```\n@misc{si2024design2code,\n    title={Design2Code: 我们距离前端工程自动化还有多远？},\n    author={Chenglei Si、Yanzhe Zhang、Zhengyuan Yang、Ruibo Liu、Diyi Yang},\n    year={2024},\n    eprint={2403.03163},\n    archivePrefix={arXiv},\n    primaryClass={cs.CL}\n}\n```\n\n我们欢迎对该项目的各种贡献（欢迎提交PR）。如有任何问题，请随时提出Issue或发送邮件给我们。","# Design2Code 快速上手指南\n\nDesign2Code 是由斯坦福 NLP SALT 实验室开源的项目，旨在评估和实现将视觉设计（截图）自动转换为前端代码（HTML）的任务。本指南帮助开发者快速搭建环境并运行基准测试或模型推理。\n\n## 环境准备\n\n- **操作系统**: Linux \u002F macOS (Windows 需使用 WSL)\n- **Python 版本**: 推荐 Python 3.11\n- **依赖管理**: 建议使用虚拟环境 (venv 或 conda)\n- **浏览器驱动**: 需要安装 Playwright 以支持截图和自动化评估\n\n## 安装步骤\n\n1. **克隆仓库并进入目录**\n   ```bash\n   git clone \u003Crepo_url>\n   cd Design2Code\n   ```\n\n2. **创建并激活虚拟环境**\n   ```bash\n   python3 -m venv venv\n   source venv\u002Fbin\u002Factivate  # Windows: venv\\Scripts\\activate\n   ```\n\n3. **安装项目依赖**\n   ```bash\n   pip install -e .\n   ```\n\n4. **安装浏览器驱动 (Playwright)**\n   ```bash\n   playwright install\n   ```\n   *如果上述命令失败，请尝试：*\n   ```bash\n   python3 -m playwright install\n   ```\n\n## 基本使用\n\n### 1. 获取数据集\n你可以从 Hugging Face 或 Google Drive 下载测试集。下载后解压到 `testset_final\u002F` 目录，结构应包含成对的截图 (`xx.png`) 和参考 HTML 代码 (`xx.html`)。\n\n- **Design2Code (484 个样本)**: [Hugging Face](https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FSALT-NLP\u002FDesign2Code)\n- **Design2Code-Hard (80 个高难样本)**: [Hugging Face](https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FSALT-NLP\u002FDesign2Code-HARD)\n\n### 2. 运行多模态提示实验 (GPT-4V \u002F Gemini \u002F Claude)\n首先在项目根目录创建 `api_keys.json` 文件并填入你的 API Key：\n\n```json\n{\n    \"organization_id\": \"\",\n    \"openai_key\": \"\",\n    \"openai_endpoint\": \"\",\n    \"gemini_api_key\": \"\"\n}\n```\n\n然后运行对应的脚本启动实验（包含直接提示、文本增强提示和自我修正提示）：\n\n```bash\n# 运行 GPT-4V 实验\nbash prompting\u002Fgpt4v.sh\n\n# 运行 Gemini Pro Vision 实验\nbash prompting\u002Fgemini.sh\n\n# 运行 Claude 3.5 Sonnet 实验\nbash prompting\u002Fclaude3-5.sh\n```\n\n### 3. 运行开源模型推理 (Design2Code-18B)\n该模型基于 CogAgent 微调而成。确保已按照 [CogAgent 说明](.\u002FCogVLM\u002FCogAgent_README.md) 安装相关库。\n\n运行推理命令：\n```bash\npython3 CogVLM\u002Ffinetune_demo\u002Finference_design2code.py\n```\n\n### 4. 运行自动评估\n将模型生成的 HTML 文件整理到指定目录后，运行以下脚本计算各项指标（Block-Match, Text, Position, Color, CLIP 等）：\n\n```bash\npython3 metrics\u002Fmulti_processing_eval.py\n```\n\n*注意：需在 `metrics\u002Fmulti_processing_eval.py` 第 54 行左右配置预测结果目录路径 (`test_dirs`)。*","某初创公司的前端团队需要在一天内将设计师提供的 20 张高保真活动页截图转化为可交互的 HTML 原型，以赶在周五前向投资人演示。\n\n### 没有 Design2Code 时\n- **重复劳动繁重**：开发人员需手动对照截图逐行编写 HTML 结构和 CSS 样式，每张页面平均耗时 3-4 小时，极易产生疲劳性错误。\n- **还原度难以保证**：人工估算间距、字体大小和颜色值往往存在偏差，导致最终页面与设计稿“形似神不似”，需反复修改调整。\n- **响应式适配滞后**：在完成桌面端开发后，还需额外花费大量时间重构代码以适配移动端，严重拖慢整体交付进度。\n- **沟通成本高昂**：前端与设计师之间因像素级细节确认频繁开会，大量时间浪费在“这个边距是不是 12px\"的琐碎争论上。\n\n### 使用 Design2Code 后\n- **生成效率飞跃**：利用 Design2Code-18B 模型直接上传截图，几分钟内即可生成结构完整、样式高度还原的基础代码，单页耗时缩短至 15 分钟。\n- **像素级精准还原**：模型能准确识别视觉元素属性，生成的代码在布局、色彩和排版上与设计稿保持高度一致，大幅减少后期微调工作。\n- **内置适配逻辑**：生成的代码天然包含合理的响应式结构，开发者只需少量补充即可实现多端兼容，显著压缩适配周期。\n- **聚焦核心逻辑**：团队可将精力从繁琐的切图写样式中解放出来，专注于业务逻辑实现和交互动效优化，提升演示原型的质感。\n\nDesign2Code 通过将视觉设计直接转化为高质量代码，将前端工程从“手工复刻”升级为“智能生成”，让团队得以在极短周期内交付高保真产品原型。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FNoviScl_Design2Code_7769da2d.png","NoviScl","Chenglei","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002FNoviScl_caf25adc.jpg","PhDing at Stanford NLP.","https:\u002F\u002Fgithub.com\u002FNoviScl",[79,83,87],{"name":80,"color":81,"percentage":82},"Jupyter Notebook","#DA5B0B",99.1,{"name":84,"color":85,"percentage":86},"Python","#3572A5",0.9,{"name":88,"color":89,"percentage":90},"Shell","#89e051",0,570,49,"2026-04-08T07:23:43","MIT","未说明","运行 Design2Code-18B 模型需要高性能 GPU（基于 CogAgent-18B），具体显存需求未说明，但 18B 参数模型通常建议 24GB+ 显存；截图和评估功能无需 GPU。",{"notes":98,"python":99,"dependencies":100},"1. 代码已在 Python 3.11 上测试，建议使用虚拟环境管理依赖。\n2. 需安装 Playwright 以支持浏览器截图和自动评估功能（运行 'playwright install'）。\n3. 运行 GPT-4V、Gemini 或 Claude 实验需配置对应的 API 密钥。\n4. 微调或推理 Design2Code-18B 模型需遵循 CogAgent 的安装指南，该模型基于 CogVLM 架构。\n5. 自动评估脚本支持多进程加速，全量测试集评估耗时约 1 小时。","3.11",[101,102,103],"playwright","torch (通过 CogVLM\u002FCogAgent 依赖)","transformers (通过 CogVLM\u002FCogAgent 依赖)",[35,15,105],"其他","2026-03-27T02:49:30.150509","2026-04-20T04:04:07.060157",[109,114,119,124,129,134,139,144],{"id":110,"question_zh":111,"answer_zh":112,"source_url":113},43348,"训练 Design2Code 模型时，输入（Prompt）是什么？","对于微调开源模型，输入是截图图像；对于提示闭源模型，输入是截图图像加上额外的文本指令。在这两种情况下，输出都是代码。","https:\u002F\u002Fgithub.com\u002FNoviScl\u002FDesign2Code\u002Fissues\u002F20",{"id":115,"question_zh":116,"answer_zh":117,"source_url":118},43349,"如何处理 Websight 数据集中包含的图片 URL？","如果您使用的是包含图片 URL 的 Websight v0.2，有两种处理方式：1. 在训练前将 URL 替换为占位符图片名称并重新渲染截图，这样模型默认会生成占位符图片；2. 保留这些 URL，在生成预测后、计算基准测试指标之前再进行替换。注意：用于训练模型的 Websight v0.1 版本通常不包含图片 URL。","https:\u002F\u002Fgithub.com\u002FNoviScl\u002FDesign2Code\u002Fissues\u002F21",{"id":120,"question_zh":121,"answer_zh":122,"source_url":123},43350,"预处理阶段是否应该移除外部链接（如 Google Fonts）以防止截图失败？","是的，外部链接有时会导致截图渲染失败。解决方案是将导入删除代码合并到数据清洗管道中，并增加一个步骤：使用正则表达式匹配所有外部链接并将其替换为空字符串。您可以参考 `clean_import.py` 脚本的处理逻辑。","https:\u002F\u002Fgithub.com\u002FNoviScl\u002FDesign2Code\u002Fissues\u002F2",{"id":125,"question_zh":126,"answer_zh":127,"source_url":128},43351,"为什么选择使用 CLIP 嵌入来计算高层相似度，而不是其他模型？","主要考虑如下：1. CLIP 是在大量互联网图像上训练的通用特征提取器，泛化能力强；2. 在 ImageNet 上训练的标准 ViT 可能不如 CLIP 通用；3. 针对文本密集图像训练的文档编码器不适合此场景，因为在计算高层相似度前已屏蔽了所有文本。因此，项目选择了最通用且流行的 CLIP 作为视觉编码器。","https:\u002F\u002Fgithub.com\u002FNoviScl\u002FDesign2Code\u002Fissues\u002F19",{"id":130,"question_zh":131,"answer_zh":132,"source_url":133},43352,"该项目支持哪个版本的 Python？","所有代码均在 Python 3.11.4 版本上经过测试。建议用户使用此版本以确保兼容性。","https:\u002F\u002Fgithub.com\u002FNoviScl\u002FDesign2Code\u002Fissues\u002F18",{"id":135,"question_zh":136,"answer_zh":137,"source_url":138},43353,"为什么代码库不支持 CentOS 系统？","因为项目使用的截图工具 Playwright 不支持 CentOS 系统。Playwright 被选中是因为它是最易用的截图工具之一。目前暂无官方支持 CentOS 的计划，如有其他建议可向维护者反馈。","https:\u002F\u002Fgithub.com\u002FNoviScl\u002FDesign2Code\u002Fissues\u002F22",{"id":140,"question_zh":141,"answer_zh":142,"source_url":143},43354,"找不到 `Pix2Code\u002Fmetrics\u002Fvisual_score.py` 文件怎么办？","该文件已被重构并移动到新路径 `Design2Code\u002Fmetrics\u002Fvisual_score.py`。如果您看到旧的路径引用（例如在 `find_examples.ipynb` 中），这是因为部分文档尚未更新，请以新的目录结构为准。","https:\u002F\u002Fgithub.com\u002FNoviScl\u002FDesign2Code\u002Fissues\u002F24",{"id":145,"question_zh":146,"answer_zh":147,"source_url":148},43355,"visual_eval_v3_multi 函数是否必须提供生成网页的截图作为输入？","不需要。该问题已修复，现在 `visual_eval_v3_multi` 函数可以直接接受生成的 HTML 文件列表作为输入，无需预先提供截图。","https:\u002F\u002Fgithub.com\u002FNoviScl\u002FDesign2Code\u002Fissues\u002F16",[]]