{"id":1463,"date":"2024-05-14T13:39:01","date_gmt":"2024-05-14T13:39:01","guid":{"rendered":"https:\/\/www.nicekj.com\/?p=1463"},"modified":"2024-05-14T13:39:53","modified_gmt":"2024-05-14T13:39:53","slug":"tupianzhuandaimayigepromptdexiaoguojiurucizhalie","status":"publish","type":"post","link":"https:\/\/www.nicekj.com\/tupianzhuandaimayigepromptdexiaoguojiurucizhalie.html","title":{"rendered":"\u3010\u56fe\u7247\u8f6c\u4ee3\u7801\u3011\u4e00\u4e2aprompt\u7684\u6548\u679c\u5c31\u5982\u6b64\u70b8\u88c2\uff1f"},"content":{"rendered":"<h2 data-id=\"heading-0\">\u80cc\u666f<\/h2>\n<p>\u8fd9\u5468\u5173\u6ce8\u5230github\u6bd4\u8f83\u706b\u7684\u4e24\u4e2a\u4ed3\u5e93<\/p>\n<ul>\n<li><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fgithub.com%2FSawyerHood%2Fdraw-a-ui\" target=\"_blank\" title=\"https:\/\/github.com\/SawyerHood\/draw-a-ui\" ref=\"nofollow noopener noreferrer\" rel=\"noopener\">github.com\/SawyerHood\/\u2026<\/a><\/li>\n<li><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fgithub.dev%2Fabi%2Fscreenshot-to-code\" target=\"_blank\" title=\"https:\/\/github.dev\/abi\/screenshot-to-code\" ref=\"nofollow noopener noreferrer\" rel=\"noopener\">github.dev\/abi\/screens\u2026<\/a><\/li>\n<\/ul>\n<p>\u770b\u4e86\u4e0b\u6e90\u7801\uff0c\u5e76\u5728\u672c\u5730run\u4e86\u4e00\u4e0b\uff0c\u7814\u7a76\u4e86\u4e00\u4e0b<\/p>\n<p>draw-a-ui\u5b98\u65b9\u6548\u679c\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.nicekj.com\/wp-content\/uploads\/replace\/4fbe8d69004800bb814e493de9b54b1d.png\" alt=\"demo.gif\" \/><\/figure>\n<\/p>\n<p>screenshot-to-code\u5b98\u65b9\u6548\u679c<\/p>\n<p><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fuser-images.githubusercontent.com%2F23818%2F283006443-6cebadae-2fe3-4986-ac6a-8fb9db030045.mp4\" target=\"_blank\" title=\"https:\/\/user-images.githubusercontent.com\/23818\/283006443-6cebadae-2fe3-4986-ac6a-8fb9db030045.mp4\" ref=\"nofollow noopener noreferrer\" rel=\"noopener\">user-images.githubusercontent.com\/23818\/28300\u2026<\/a><\/p>\n<p>\u6548\u679c\u662f\u4e0d\u662f\u5f88\u70b8\u88c2\uff0c\u8eab\u4e3a\u524d\u7aefer\u7684\u6211\u76f4\u547cwoc<\/p>\n<h2 data-id=\"heading-1\">\u539f\u7406<\/h2>\n<h3 data-id=\"heading-2\">\u6838\u5fc3\u539f\u7406\u6709\u4e24\u70b9<\/h3>\n<p><strong>gpt-4-vision-preview \u7684\u5f3a\u5927\u80fd\u529b<\/strong><\/p>\n<p>gpt4 \u7684 vision \u63a5\u53e3\u80fd\u529b\uff0c\u5c06\u56fe\u7247\u585e\u7ed9 openai gpt api \u53bb\u8fdb\u884c\u56fe\u5f62\u8bc6\u522b\uff0c\u914d\u5408\u7279\u5b9a\u7684prompt\u6765\u8ba9gpt\u8f93\u51fa\u542b\u6709tailwindcss\u7684\u5355html\u6587\u4ef6\uff0c\u6765\u5feb\u901f\u8fdb\u884c\u751f\u6210\u548c\u6548\u679c\u5c55\u793a<\/p>\n<p><strong>tailwindcss\u7684\u5355\u6587\u4ef6\u7279\u6027<\/strong><\/p>\n<p>\u8fd9\u70b9\u5f88\u6709\u610f\u601d\uff0ctailwindcss\u7684\u5355\u6587\u4ef6\u7279\u6027\u8ba9\u5176\u5728gpt\u65f6\u4ee3\u5927\u653e\u5149\u5f69\uff0c\u5047\u8c61\u5982\u679c\u662f\u9700\u8981html\u6587\u4ef6\u548ccss\/less\/sass\u6587\u4ef6 \u591a\u6587\u4ef6\u914d\u5408\uff0cgpt\u5410\u51fa\u7684\u6548\u679c\u80af\u5b9a\u5927\u5927\u4e0d\u5982tailwindcss\u7684\u5355html\u6587\u4ef6\u3002\u518d\u52a0\u4e0agpt\u5b98\u65b9\u7684\u8d44\u6599\u66f4\u65b0\u52302023\u5e744\u6708\u540e\uff0c\u5bf9tailwindcss\u7684\u89e3\u6790\u548c\u7406\u89e3\u66f4\u52a0\u5168\u9762<\/p>\n<h3 data-id=\"heading-3\">prompt<\/h3>\n<p>draw-a-ui\u7684prompt<\/p>\n<pre><\/div><div class=\"code-block-extension-headerRight\"><span class=\"code-block-extension-lang\">js<\/span><div class=\"code-block-extension-copyCodeBtn\">\u590d\u5236\u4ee3\u7801<\/div><\/div><\/div><code class=\"hljs language-js code-block-extension-codeShowNum\" lang=\"js\"><span class=\"code-block-extension-codeLine\" data-line-num=\"1\"><span class=\"hljs-keyword\">const<\/span> systemPrompt = <span class=\"hljs-string\">`You are an expert tailwind developer. A user will provide you with a<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"2\"> low-fidelity wireframe of an application and you will return <\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"3\"> a single html file that uses tailwind to create the website. Use creative license to make the application more fleshed out.<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"4\">if you need to insert an image, use placehold.co to create a placeholder image. Respond only with the html file.`;<\/span>\n<\/code><\/pre>\n<p>screenshot-to-code\u7684prompt<\/p>\n<pre><\/div><div class=\"code-block-extension-headerRight\"><span class=\"code-block-extension-lang\">js<\/span><div class=\"code-block-extension-copyCodeBtn\">\u590d\u5236\u4ee3\u7801<\/div><\/div><\/div><code class=\"hljs language-js code-block-extension-codeShowNum\" lang=\"js\"><span class=\"code-block-extension-codeLine\" data-line-num=\"1\"><span class=\"hljs-variable constant_\">SYSTEM_PROMPT<\/span> = <span class=\"hljs-string\">\"\"<\/span><span class=\"hljs-string\">\"<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"2\">You are an expert Tailwind developer<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"3\">You take screenshots of a reference web page from the user, and then build single page apps <\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"4\">using Tailwind, HTML and JS.<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"5\">You might also be given a screenshot of a web page that you have already built, and asked to<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"6\">update it to look more like the reference image.<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"7\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"8\">- Make sure the app looks exactly like the screenshot.<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"9\">- Pay close attention to background color, text color, font size, font family, <\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"10\">padding, margin, border, etc. Match the colors and sizes exactly.<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"11\">- Use the exact text from the screenshot.<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"12\">- Do not add comments in the code such as \"&lt;!-- <span class=\"hljs-title class_\">Add<\/span> other navigation links <span class=\"hljs-keyword\">as<\/span> needed --&gt;<span class=\"hljs-string\">\" and \"<\/span>&lt;!-- ... other news items ... --&gt;<span class=\"hljs-string\">\" in place of writing the full code. WRITE THE FULL CODE.<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"13\">- Repeat elements as needed to match the screenshot. For example, if there are 15 items, the code should have 15 items. DO NOT LEAVE comments like \"&lt;!-- <span class=\"hljs-title class_\">Repeat<\/span> <span class=\"hljs-keyword\">for<\/span> each news item --&gt;<span class=\"hljs-string\">\" or bad things will happen.<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"14\">- For images, use placeholder images from https:\/\/placehold.co and include a detailed description of the image in the alt text so that an image generation AI can generate the image later.<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"15\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"16\">In terms of libraries,<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"17\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"18\">- Use this script to include Tailwind: &lt;script src=\"<span class=\"hljs-attr\">https<\/span>:<span class=\"hljs-comment\">\/\/cdn.tailwindcss.com\"&gt;&lt;\/script&gt;<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"19\">- <span class=\"hljs-title class_\">You<\/span> can use <span class=\"hljs-title class_\">Google<\/span> <span class=\"hljs-title class_\">Fonts<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"20\">- <span class=\"hljs-title class_\">Font<\/span> <span class=\"hljs-title class_\">Awesome<\/span> <span class=\"hljs-keyword\">for<\/span> <span class=\"hljs-attr\">icons<\/span>: <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.3\/css\/all.min.css\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">link<\/span>&gt;<\/span><\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"21\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"22\"><span class=\"hljs-title class_\">Return<\/span> only the full code <span class=\"hljs-keyword\">in<\/span> &lt;html&gt;&lt;\/html&gt; tags.<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"23\"><span class=\"hljs-title class_\">Do<\/span> not include markdown <span class=\"hljs-string\">\"```\"<\/span> or <span class=\"hljs-string\">\"```html\"<\/span> at the start or end.<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"24\"><span class=\"hljs-string\">\"\"<\/span><span class=\"hljs-string\">\"<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"25\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"26\">USER_PROMPT = \"<span class=\"hljs-string\">\"\"<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"27\"><span class=\"hljs-title class_\">Generate<\/span> code <span class=\"hljs-keyword\">for<\/span> a web page that looks exactly like <span class=\"hljs-variable language_\">this<\/span>.<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"28\"><span class=\"hljs-string\">\"\"<\/span><span class=\"hljs-string\">\"<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"29\"><\/span>\n<\/code><\/pre>\n<p>\u53ef\u4ee5\u901a\u8fc7\u770b\u5230 draw-a-ui \u7684prompt\u5584\u4e8e\u8349\u56fe\u8fd8\u539f\uff0cscreenshot-to-code\u7684prompt\u5584\u4e8e\u5df2\u6709\u7684ui\u56fe\u7247\u56fe\u8fdb\u884c\u8fd8\u539f\uff0c\u4f7f\u7528\u4e0b\u6765\u611f\u89c9draw-a-ui\u7684\u573a\u666f\u66f4\u52a0\u4e30\u5bcc\uff0c\u56e0\u4e3a\u4ed6\u672c\u8eab\u662f\u57fa\u4e8e\u4e00\u4e2a\u5f00\u6e90\u7684\u56fe\u7247\u7f16\u8f91\u5e73\u53f0**<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Ftldraw%2Ftldraw\" target=\"_blank\" title=\"https:\/\/github.com\/tldraw\/tldraw\" ref=\"nofollow noopener noreferrer\" rel=\"noopener\">tldraw<\/a>** \u6765\u5b9e\u73b0\u7684\uff0c\u7528\u6237\u53ef\u4ee5\u5728\u5e73\u53f0\u4e0a\u753b\u8349\u56fe\uff0c\u7c98\u8d34\u56fe\u7247\uff0c\u67d0\u79cd\u7a0b\u5ea6\u4e0a\u6765\u8bb2\uff0cscreen-to-code\u80fd\u505a\u7684 draw-a-ui\u90fd\u80fd\u505a\uff0c\u4f46\u53cd\u4e4b\u4e0d\u884c<\/p>\n<h2 data-id=\"heading-4\">\u7ad9\u5728\u5de8\u4eba\u7684\u80a9\u8180\u4e0a<\/h2>\n<blockquote>\n<p>\u5728draw-a-ui\u7684\u57fa\u7840\u4e0a\uff0c\u7ed3\u5408screen-to-code, \u8fdb\u884c\u4e86\u4e00\u4e9b\u4f18\u5316, \u5e76\u901a\u8fc7vercel\u53d1\u5e03\u5230\u7ebf\u4e0a\uff0c\u6b22\u8fce\u5927\u5bb6\u6765\u4f53\u9a8c\uff0c\u5f53\u7136\uff0c\u8981\u81ea\u5907gpt-4-vision-preview\u7684key \u54c8\u54c8 \u8c03\u7528\u4e00\u6b210.1-0.2$\u7684\u989d\u5ea6\u3002\u3002<\/p>\n<\/blockquote>\n<p>\u4ed3\u5e93\u5730\u5740 <a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fnoobakong%2Fai-code\" target=\"_blank\" title=\"https:\/\/github.com\/noobakong\/ai-code\" ref=\"nofollow noopener noreferrer\" rel=\"noopener\">github.com\/noobakong\/a\u2026<\/a><\/p>\n<p>\u4f53\u9a8c\u5730\u5740 <a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fai-code.akong.fun%2F\" target=\"_blank\" title=\"https:\/\/ai-code.akong.fun\/\" ref=\"nofollow noopener noreferrer\" rel=\"noopener\">ai-code.akong.fun\/<\/a><\/p>\n<p>\u6548\u679c\u5982\u4e0b<\/p>\n<p>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.nicekj.com\/wp-content\/uploads\/replace\/39c4c60d84751b024ce5c2c64d82c5b4.png\" alt=\"image.png\" \/><\/figure>\n<\/p>\n<p>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.nicekj.com\/wp-content\/uploads\/replace\/ad5674a6814a43f85da016b2e9295a45.png\" alt=\"image.png\" \/><\/figure>\n<\/p>\n<p>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.nicekj.com\/wp-content\/uploads\/replace\/4989ee4a082d11422b6a692892d78cf3.png\" alt=\"image.png\" \/><\/figure>\n<\/p>\n<p>\u5177\u4f53\u4f18\u5316\u70b9\u5982\u4e0b<\/p>\n<h3 data-id=\"heading-5\">prompt\u4f18\u5316<\/h3>\n<p>\u4f53\u9a8c\u4e86\u4e00\u4e9bdraw-a-ui\u7684\u7cfb\u7edf\uff0c\u611f\u89c9\u5f88\u4e0d\u9519\uff0c\u4f46\u662f\u6839\u636e\u524d\u9762\u6240\u8bf4\u7684 \u53ea\u80fd\u753b\u8349\u56fe\uff0c\u6240\u4ee5\u7ed3\u5408screen-to-code\u7684prompt\uff0c\u5c06\u4e24\u8005\u7684prompt\u8fdb\u884c\u4e86\u6574\u5408\u4f18\u5316\uff0c\u4f18\u5316\u540e\u7684prompt\u65e2\u80fd\u8fd8\u539f\u8349\u56fe\uff0c\u4e5f\u80fd\u8fd8\u539f\u771f\u5b9eUI\u56fe\uff0c\u4f18\u5316\u540e\u7684prompt\u5982\u4e0b\uff1a<\/p>\n<pre><\/div><div class=\"code-block-extension-headerRight\"><span class=\"code-block-extension-lang\">js<\/span><div class=\"code-block-extension-copyCodeBtn\">\u590d\u5236\u4ee3\u7801<\/div><\/div><\/div><code class=\"hljs language-js code-block-extension-codeShowNum\" lang=\"js\"><span class=\"code-block-extension-codeLine\" data-line-num=\"1\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"2\"><span class=\"hljs-keyword\">const<\/span> systemPrompt = <\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"3\"><span class=\"hljs-string\">`<\/span><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"4\"># Role: Tailwind CSS Developer<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"5\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"6\">## Task<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"7\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"8\">- Input: Screenshot(s) of a reference web page or Low-fidelity<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"9\">- Output: Single HTML page using Tailwind CSS, HTML<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"10\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"11\">## Guidelines<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"12\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"13\">- Utilize Tailwind CSS to develop the website based on the provided screenshot or Low-fidelity<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"14\">- Achieve an exact visual match to the provided screenshot or Low-fidelity<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"15\">- Pay close attention to:<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"16\">  - Background color<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"17\">  - Text color<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"18\">  - Font size<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"19\">  - Font family<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"20\">  - Padding<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"21\">  - Margin<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"22\">  - Border<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"23\">- Use the precise text from the screenshot<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"24\">- Avoid placeholder comments; write the full code<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"25\">- Repeat elements as shown in the screenshot (e.g., if there are 15 items, include 15 items in the code)<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"26\">- Use placeholder images from `https:\/\/placehold.co` with descriptive `alt` text for future image generation<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"27\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"28\">## Libraries<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"29\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"30\">- Include Tailwind CSS via: `&lt;script src=\"https:\/\/cdn.tailwindcss.com\"&gt;&lt;\/script&gt;`<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"31\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"32\">## Deliverable<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"33\"><\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"34\">- Respond with the complete HTML code within `&lt;html&gt;` tags<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"35\">- Respond with the HTML file content only<\/span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"36\">`<\/span>\n<\/code><\/pre>\n<h3 data-id=\"heading-6\">\u63a5\u53e3\u6539\u4e3a\u524d\u7aef\u8c03\u7528<\/h3>\n<p>draw-a-ui\u539f\u4ed3\u5e93\u662f\u57fa\u4e8enextjs\u5f00\u53d1\u7684\uff0c\u8c03\u7528\u653e\u5230\u4e86service\u5c42\uff0c\u4f46\u662f\u90e8\u7f72\u5230vercel\u4e4b\u540e\uff0c\u666e\u901a\u7684\u7528\u6237\u90e8\u7f72\u540e\u63a5\u53e3\u8d85\u65f6\u65f6\u95f4\u6700\u592710s\uff0c\u6240\u4ee5\u4f1a\u6709\u8c03\u7528timeout\u7684\u60c5\u51b5\u51fa\u73b0\uff0c\u4e3a\u4e86\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\uff0c\u76f4\u63a5\u628a\u8c03\u7528gpt\u7684\u903b\u8f91\u653e\u5230\u4e86\u524d\u7aef<\/p>\n<h3 data-id=\"heading-7\">gpt\u5bc6\u94a5\u7684\u52a8\u6001\u914d\u7f6e<\/h3>\n<p>\u754c\u9762\u53f3\u4e0b\u89d2\u6dfb\u52a0\u4e86\u5bc6\u94a5\u8bbe\u7f6e\u7684\u754c\u9762\uff0c\u7528\u6237\u53ef\u81ea\u884c\u914d\u7f6egpt-4-vision-preview key\u548capi_base_url\u6765\u8fdb\u884c\u4f7f\u7528<\/p>\n<p>\u5982\u679c\u662fopenai\u5b98\u65b9\u7684key\uff0c\u4ee3\u7406\u5730\u5740\u5c31\u586b\u5b98\u65b9\u7684\u5373\u53ef\uff0c\u8fd9\u91cc\u6ca1\u505a\u9ed8\u8ba4\u503c<\/p>\n<p>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.nicekj.com\/wp-content\/uploads\/replace\/71e6969e2947e6a7bd2931d825b8a78a.png\" alt=\"image.png\" \/><\/figure>\n<\/p>\n<h3 data-id=\"heading-8\">\u5386\u53f2\u8bb0\u5f55\u529f\u80fd<\/h3>\n<p>draw-a-ui\u539f\u4ed3\u5e93\u6ca1\u6709\u5199\u5386\u53f2\u8bb0\u5f55\u529f\u80fd<\/p>\n<p>\u6bd5\u7adf\u8c03\u7528\u4e00\u6b21\u63a5\u53e3\u90a3\u4e48\u8d35\uff01 \u5386\u53f2\u8bb0\u5f55\u9ad8\u4f4e\u5f97\u52a0\u4e0a\u3002\u3002 \u4e0d\u6789\u6bcf\u6b210.2$\u7684\u989d\u5ea6 \u54c8\u54c8<\/p>\n<p>\u8fd9\u91cc\u7b80\u5355\u7684\u4f7f\u7528\u4e86 indexedDB\u6765\u8fdb\u884c\u6570\u636e\u5b58\u50a8<\/p>\n<p>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.nicekj.com\/wp-content\/uploads\/replace\/82fbf676cc26b2d7951819761d2d0943.png\" alt=\"image.png\" \/><\/figure>\n<\/p>\n<h3 data-id=\"heading-9\">\u5b8c\u5584\u4e86PC Mobile\u7684\u9884\u89c8<\/h3>\n<p>\u5728\u4ee3\u7801\u9884\u89c8\u754c\u9762\uff0c\u6dfb\u52a0\u4e86 mobile \u5c3a\u5bf8\u9884\u89c8\uff0c\u65b9\u4fbf\u67e5\u9605\u6548\u679c<\/p>\n<p>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.nicekj.com\/wp-content\/uploads\/replace\/540efeee72179b73bc6ff2ef709c79bd.png\" alt=\"image.png\" \/><\/figure>\n<\/p>\n<h2 data-id=\"heading-10\">\u603b\u7ed3<\/h2>\n<p><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fnoobakong%2Fai-code\" target=\"_blank\" title=\"https:\/\/github.com\/noobakong\/ai-code\" ref=\"nofollow noopener noreferrer\" rel=\"noopener\">\u6b22\u8fce\u5927\u5bb6star<\/a><\/p>\n<p><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fai-code.akong.fun%2F\" target=\"_blank\" title=\"https:\/\/ai-code.akong.fun\/\" ref=\"nofollow noopener noreferrer\" rel=\"noopener\">\u6b22\u8fce\u5927\u5bb6\u5728\u7ebf\u4f53\u9a8c<\/a><\/p>\n<p>\u5728draw-a-ui\u7684\u57fa\u7840\u4e0a\u8fdb\u884c\u4e86\u70b9\u6539\u52a8\uff0c\u4ee5\u5feb\u901f\u7684\u5728\u7ebf\u7528\u8d77\u6765<\/p>\n<p>\u5728aigc\u65f6\u4ee3\uff0c\u4e00\u4e2aprompt\uff0c\u5c31\u80fd\u771f\u5207\u7684\u7528\u4e8e\u751f\u4ea7\u529b\u7684\u63d0\u793a\uff0c\u771f\u7684\u662f\u8ba9\u4eba\u5174\u594b\u53c8\u7126\u8651\u3002<\/p>\n<p>\u5728\u8fd9\u4e2a\u65b0\u6280\u672f\u65b0\u80fd\u529b\u8ff8\u53d1\u7684\u65f6\u4ee3\uff0c\u4ec0\u4e48\u5728\u53d8\uff0c\u4ec0\u4e48\u53c8\u59cb\u7ec8\u4e0d\u53d8\uff0c\u5982\u4f55\u5256\u6790\u51fa\u5176\u4e2d\u4e0d\u53d8\u7684\u5143\u77e5\u8bc6\u548c\u5185\u6838\u6846\u67b6\uff0c\u4fdd\u6301\u7ade\u4e89\u529b\uff0c\u662f\u4e2a\u4ee4\u4eba\u6df1\u601d\u7684\u95ee\u9898\uff0c\u76ee\u524d\u6211\u8fd8\u6ca1\u6709\u627e\u5230\u7b54\u6848<\/p>","protected":false},"excerpt":{"rendered":"<p>\u6700\u8fd1\u770b\u5230\u4e24\u4e2agithub\u4e0a\u6bd4\u8f83\u706b\u7684 ai to code \u7684\u9879\u76ee\uff0c\u6765\u5b66\u4e60\u4e00\u4e0b\u5427\uff0c\u770b\u770b\u7a76\u7adf\u662f\u4e2a\u4ec0\u4e48\u4e1c\u4e1c~<\/p>\n","protected":false},"author":1,"featured_media":8813,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"","rank_math_focus_keyword":"","views":"4","footnotes":""},"categories":[3],"tags":[136,126,127,128,129],"collection":[],"class_list":["post-1463","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-fenlei2","tag-136","tag-gpt","tag-ai","tag-128","tag-129"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/posts\/1463","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/comments?post=1463"}],"version-history":[{"count":0,"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/posts\/1463\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/media\/8813"}],"wp:attachment":[{"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/media?parent=1463"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/categories?post=1463"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/tags?post=1463"},{"taxonomy":"collection","embeddable":true,"href":"https:\/\/www.nicekj.com\/nicekj2024\/wp\/v2\/collection?post=1463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}