Pencil MCP: ਡਿਜ਼ਾਈਨ ਤੋਂ ਕੋਡ ਵਿੱਚ ਤਬਦੀਲੀ, ਫਰੰਟ-ਐਂਡ ਵਿਕਾਸ ਦੀ ਕੁਸ਼ਲਤਾ 8 ਗੁਣਾ ਵਧੀ

ਸਤ ਸ੍ਰੀ ਅਕਾਲ, ਮੈਂ ਲਿਆਂਗ ਸ਼ਿਆਓ ਹਾਂ, ਜੋ ਵਿਦੇਸ਼ੀ ਉਤਪਾਦ ਬਣਾਉਂਦਾ ਹੈ। ਜਲਦੀ ਹੀ ਨਵਾਂ ਸਾਲ ਆ ਰਿਹਾ ਹੈ, ਅਤੇ ਮੈਂ ਤੁਹਾਡੇ ਨਾਲ ਆਪਣੀਆਂ ਨਵੀਆਂ ਪ੍ਰਾਪਤੀਆਂ ਸਾਂਝੀਆਂ ਕਰਨ ਲਈ ਸਾਲ ਤੋਂ ਪਹਿਲਾਂ ਇੱਕ ਹੋਰ ਲੇਖ ਪ੍ਰਕਾਸ਼ਿਤ ਕਰਾਂਗਾ। ਵੈੱਬ ਪੇਜ ਜਾਂ ਐਪ ਬਣਾਉਂਦੇ ਸਮੇਂ, ਕੀ ਤੁਸੀਂ ਕਦੇ ਅਜਿਹਾ ਮਹਿਸੂਸ ਕੀਤਾ ਹੈ: ਮੈਂ ਇੱਕ ਸੁੰਦਰ ਪੰਨਾ ਬਣਾਉਣਾ ਚਾਹੁੰਦਾ ਹਾਂ, ਪਰ ਮੇਰਾ ਆਪਣਾ ਡਿਜ਼ਾਈਨ ਠੀਕ ਨਹੀਂ ਹੈ ਡਿਜ਼ਾਈਨਰ ਲੱਭਣਾ ਬਹੁਤ ਮਹਿੰਗਾ ਹੈ, ਅਤੇ ਮੁਫਤ ਟੈਂਪਲੇਟਸ ਢੁਕਵੇਂ ਨਹੀਂ ਹਨ ਡਿਜ਼ਾਈਨ ਨੂੰ ਅੰਤਿਮ ਰੂਪ ਦੇਣਾ ਮੁਸ਼ਕਲ ਹੈ, ਅਤੇ ਕੋਡ ਵਿੱਚ ਬਦਲਣਾ ਸਮੱਸਿਆਵਾਂ ਦਾ ਇੱਕ ਸਮੂਹ ਹੈ ਸੱਚ ਕਹਾਂ ਤਾਂ, ਜਦੋਂ ਮੈਂ ਪਹਿਲਾਂ ਫਰੰਟ-ਐਂਡ ਪ੍ਰੋਜੈਕਟ ਕਰਦਾ ਸੀ, ਤਾਂ ਮੈਂ ਡਿਜ਼ਾਈਨ ਦੇ ਅਨੁਸਾਰ ਸਟਾਈਲ ਨੂੰ ਅਡਜਸਟ ਕਰਨ ਵਿੱਚ ਅੱਧਾ ਦਿਨ ਬਿਤਾਉਂਦਾ ਸੀ। ਸਪੇਸਿੰਗ 2px ਦੂਰ ਹੈ, ਰੰਗ ਸਹੀ ਨਹੀਂ ਹੈ, ਗੋਲ ਕੋਨੇ ਜੋੜਨੇ ਭੁੱਲ ਗਏ... ਵਾਰ-ਵਾਰ, ਇਹ ਬਹੁਤ ਤੰਗ ਕਰਨ ਵਾਲਾ ਹੈ। ਖੁਸ਼ਖਬਰੀ ਇਹ ਹੈ: ਹੁਣ Pencil MCP ਦੇ ਨਾਲ, ਇਹਨਾਂ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਅਸਲ ਵਿੱਚ ਹੱਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਮੈਂ ਹਾਲ ਹੀ ਵਿੱਚ ਇਸਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕੁਝ ਪੰਨੇ ਬਣਾਏ ਹਨ, ਅਤੇ ਮੈਨੂੰ ਇਹ ਬਹੁਤ ਵਧੀਆ ਲੱਗਿਆ - ਡਿਜ਼ਾਈਨ ਤੋਂ ਕੋਡ ਤੱਕ, ਕੁਸ਼ਲਤਾ ਕਈ ਗੁਣਾ ਵਧੀ ਹੈ। ਅਤੇ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਗੱਲ ਇਹ ਹੈ ਕਿ AI ਦੁਆਰਾ ਤਿਆਰ ਕੀਤੇ ਡਿਜ਼ਾਈਨ ਦੀ ਗੁਣਵੱਤਾ ਚੰਗੀ ਹੈ, ਅਤੇ ਕੋਡ ਰੀਸਟੋਰੇਸ਼ਨ ਵੀ ਬਹੁਤ ਉੱਚੀ ਹੈ। ਇਹ ਲੇਖ ਇਸ ਬਾਰੇ ਗੱਲ ਕਰੇਗਾ: Pencil ਅਸਲ ਵਿੱਚ ਕੀ ਹੈ, ਇਹ ਵਰਤਣ ਯੋਗ ਕਿਉਂ ਹੈ, ਅਤੇ ਇਸਨੂੰ ਜਲਦੀ ਕਿਵੇਂ ਸ਼ੁਰੂ ਕਰਨਾ ਹੈ। ## 01. Pencil ਕੀ ਹੈ? ਇਸਨੂੰ ਸਧਾਰਨ ਸ਼ਬਦਾਂ ਵਿੱਚ ਸਮਝਾਓ ਸਧਾਰਨ ਸ਼ਬਦਾਂ ਵਿੱਚ, Pencil ਇੱਕ ਅਜਿਹਾ ਟੂਲ ਹੈ ਜੋ ਡਿਜ਼ਾਈਨ ਅਤੇ ਕੋਡ ਨੂੰ ਜੋੜ ਸਕਦਾ ਹੈ। ਪਹਿਲਾਂ ਪ੍ਰਕਿਰਿਆ ਇਸ ਤਰ੍ਹਾਂ ਸੀ: Figma ਵਿੱਚ ਡਿਜ਼ਾਈਨ ਬਣਾਓ ਡਿਜ਼ਾਈਨਰ ਆਕਾਰ, ਰੰਗ ਅਤੇ ਸਪੇਸਿੰਗ ਨੂੰ ਨੋਟ ਕਰਦੇ ਹਨ ਡਿਵੈਲਪਰ ਡਿਜ਼ਾਈਨ ਦੇ ਅਨੁਸਾਰ ਕੋਡ ਦੀ ਇੱਕ-ਇੱਕ ਲਾਈਨ ਲਿਖਦੇ ਹਨ ਲਿਖਣ ਤੋਂ ਬਾਅਦ ਡਿਜ਼ਾਈਨ ਨਾਲ ਤੁਲਨਾ ਕਰੋ, ਅਤੇ ਪਤਾ ਲੱਗਦਾ ਹੈ ਕਿ ਰੀਸਟੋਰੇਸ਼ਨ ਸਿਰਫ 70%-80% ਹੈ ਵਾਰ-ਵਾਰ ਐਡਜਸਟ ਕਰੋ, ਸੰਚਾਰ ਕਰੋ... Pencil ਦਾ ਹੱਲ ਇਹ ਹੈ: ਤੁਹਾਨੂੰ ਸਿਰਫ਼ ਕੁਦਰਤੀ ਭਾਸ਼ਾ ਵਿੱਚ ਲੋੜਾਂ ਦਾ ਵਰਣਨ ਕਰਨ ਦੀ ਲੋੜ ਹੈ (ਜਿਵੇਂ ਕਿ "ਮੇਰੇ ਲਈ ਇੱਕ ਐਪਲ-ਸ਼ੈਲੀ ਦਾ ਮਿਊਜ਼ਿਕ ਪਲੇਅਰ ਡਿਜ਼ਾਈਨ ਕਰੋ"), ਅਤੇ AI ਸਿੱਧਾ ਕੈਨਵਸ 'ਤੇ ਇੱਕ ਡਿਜ਼ਾਈਨ ਤਿਆਰ ਕਰ ਸਕਦਾ ਹੈ, ਅਤੇ ਫਿਰ ਇੱਕ ਕਲਿੱਕ ਨਾਲ ਸੰਬੰਧਿਤ ਕੋਡ ਤਿਆਰ ਕਰ ਸਕਦਾ ਹੈ (Next.js, Flutter, Vue, ਆਦਿ ਸਾਰੇ ਸਮਰਥਿਤ ਹਨ)। ਅਤੇ ਹੈਰਾਨੀ ਦੀ ਗੱਲ ਹੈ ਕਿ ਤੁਸੀਂ ਡਿਜ਼ਾਈਨ ਕਰਦੇ ਸਮੇਂ ਐਡਜਸਟ ਕਰ ਸਕਦੇ ਹੋ। ਉਦਾਹਰਣ ਲਈ: "ਜਾਮਨੀ ਬਹੁਤ ਜ਼ਿਆਦਾ ਹੈ, ਕੁਝ ਹਰਾ ਬਦਲੋ" "ਸਪੇਸਿੰਗ ਨੂੰ ਥੋੜਾ ਵੱਡਾ ਕਰੋ" "ਇਸ ਵੈੱਬਸਾਈਟ ਦੀ ਸ਼ੈਲੀ ਦਾ ਹਵਾਲਾ ਦਿਓ" AI ਰੀਅਲ ਟਾਈਮ ਵਿੱਚ ਡਿਜ਼ਾਈਨ ਅਤੇ ਕੋਡ ਨੂੰ ਐਡਜਸਟ ਕਰਨ ਵਿੱਚ ਤੁਹਾਡੀ ਮਦਦ ਕਰੇਗਾ, ਤੁਹਾਨੂੰ ਖੁਦ ਕੁਝ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। ## 02. ਮੈਨੂੰ ਕਿਉਂ ਲੱਗਦਾ ਹੈ ਕਿ Pencil ਵਰਤਣ ਯੋਗ ਹੈ? ### 1) ਕੁਸ਼ਲਤਾ ਅਸਲ ਵਿੱਚ ਉੱਚੀ ਹੈ ਇੱਕ ਪੰਨੇ ਦੇ ਡਿਜ਼ਾਈਨ ਨੂੰ ਰਵਾਇਤੀ ਤਰੀਕੇ ਨਾਲ ਬਣਾਉਣ ਵਿੱਚ 4-6 ਘੰਟੇ ਲੱਗ ਸਕਦੇ ਹਨ। Pencil ਨਾਲ, ਇਸਨੂੰ 20-40 ਮਿੰਟਾਂ ਵਿੱਚ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਅਤੇ ਕੋਡ ਰੀਸਟੋਰੇਸ਼ਨ 98%+ ਤੱਕ ਪਹੁੰਚ ਸਕਦੀ ਹੈ, ਤੁਹਾਨੂੰ ਬੁਨਿਆਦੀ ਤੌਰ 'ਤੇ ਸਟਾਈਲ ਨੂੰ ਐਡਜਸਟ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। ਮੈਂ ਖੁਦ ਇਸਨੂੰ ਅਜ਼ਮਾਇਆ, ਅਤੇ ਇੱਕ ਸਧਾਰਨ Landing Page ਬਣਾਇਆ, ਡਿਜ਼ਾਈਨ ਤੋਂ ਲੈ ਕੇ ਕੋਡ ਤੱਕ ਸਭ ਕੁਝ ਪੂਰਾ ਹੋ ਗਿਆ, ਇਸ ਵਿੱਚ ਸਿਰਫ ਅੱਧਾ ਘੰਟਾ ਲੱਗਿਆ। ### 2) ਡਿਜ਼ਾਈਨ ਦੀ ਗੁਣਵੱਤਾ ਸਥਿਰ ਹੈ ਪਹਿਲਾਂ, ਜਦੋਂ AI ਨੂੰ ਡਿਜ਼ਾਈਨ ਤਿਆਰ ਕਰਨ ਲਈ ਕਿਹਾ ਜਾਂਦਾ ਸੀ, ਤਾਂ ਅਕਸਰ ਇਹ ਸਮੱਸਿਆਵਾਂ ਆਉਂਦੀਆਂ ਸਨ: ਰੰਗ ਸਕੀਮ ਅਸੰਗਤ ਹੈ ਸਪੇਸਿੰਗ ਗੜਬੜ ਹੈ ਫੌਂਟ ਦਾ ਆਕਾਰ ਅਸੰਗਤ ਹੈ Pencil ਦੇ ਪਿੱਛੇ ਇੱਕ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ ਅਤੇ ਸੁਹਜਾਤਮਕ ਮਿਆਰਾਂ ਦਾ ਇੱਕ ਸਮੂਹ ਹੈ, ਅਤੇ ਤਿਆਰ ਕੀਤੇ ਡਿਜ਼ਾਈਨ ਦੀ ਗੁਣਵੱਤਾ ਮੁਕਾਬਲਤਨ ਸਥਿਰ ਹੈ। ਹਾਲਾਂਕਿ ਇਹ ਸੰਪੂਰਨ ਨਹੀਂ ਹੋ ਸਕਦਾ, ਪਰ ਇਹ ਘੱਟੋ ਘੱਟ ਬਹੁਤ ਬਦਸੂਰਤ ਨਹੀਂ ਹੋਵੇਗਾ। ### 3) ਕਈ ਤਕਨੀਕੀ ਸਟੈਕਾਂ ਦਾ ਸਮਰਥਨ ਕਰੋ ਭਾਵੇਂ ਤੁਸੀਂ Next.js, Flutter, Vue ਜਾਂ SwiftUI ਕਰ ਰਹੇ ਹੋ, Pencil ਆਪਣੇ ਆਪ ਹੀ ਸੰਬੰਧਿਤ ਕੋਡ ਤਿਆਰ ਕਰ ਸਕਦਾ ਹੈ। ਇਹ ਮੇਰੇ ਵਰਗੇ ਲੋਕਾਂ ਲਈ ਬਹੁਤ ਸੁਵਿਧਾਜਨਕ ਹੈ ਜੋ ਮਲਟੀ-ਐਂਡ ਡਿਵੈਲਪਮੈਂਟ ਕਰਦੇ ਹਨ - ਇੱਕ ਡਿਜ਼ਾਈਨ, ਕਈ ਪਲੇਟਫਾਰਮਾਂ ਲਈ ਸਾਰੇ ਕੋਡ ਉਪਲਬਧ ਹਨ। ## 03. Pencil ਨੂੰ ਕਿਵੇਂ ਇੰਸਟਾਲ ਅਤੇ ਵਰਤਣਾ ਹੈ? ਹੇਠਾਂ ਮੈਂ ਆਪਣੀ ਇੰਸਟਾਲੇਸ਼ਨ ਅਤੇ ਵਰਤੋਂ ਦੀ ਪ੍ਰਕਿਰਿਆ ਸਾਂਝੀ ਕਰਾਂਗਾ, ਇਹ ਵਰਤਮਾਨ ਵਿੱਚ ਸਭ ਤੋਂ ਆਸਾਨ ਤਰੀਕਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ### ਪਹਿਲਾ ਕਦਮ: Pencil MCP ਇੰਸਟਾਲ ਕਰੋ ਸਿੱਧਾ ਆਪਣੇ IDE (VS Code, Cursor, ਆਦਿ) ਵਿੱਚ "pencil" ਖੋਜੋ ਇੰਸਟਾਲ ਕਰਨ ਲਈ ਕਲਿੱਕ ਕਰੋ, ਇਸਨੂੰ ਡਾਊਨਲੋਡ ਕਰਨ ਲਈ ਕਿਸੇ ਹੋਰ ਥਾਂ 'ਤੇ ਨਾ ਜਾਓ (ਪਾਈਰੇਟਿਡ ਸੰਸਕਰਣ ਡਾਊਨਲੋਡ ਕਰਨ ਤੋਂ ਬਚਣ ਲਈ)  ਨੋਟ: ਸਿੱਧਾ IDE ਵਿੱਚ ਖੋਜ ਕਰਨਾ ਸਭ ਤੋਂ ਸੁਰੱਖਿਅਤ ਤਰੀਕਾ ਹੈ। ### ਦੂਜਾ ਕਦਮ: AI ਨੂੰ ਤੁਹਾਡੀ ਸੰਰਚਨਾ ਕਰਨ ਦਿਓ ਇੰਸਟਾਲ ਕਰਨ ਤੋਂ ਬਾਅਦ ਇਸਨੂੰ ਕਿਵੇਂ ਸੰਰਚਿਤ ਕਰਨਾ ਹੈ? ਸੱਚ ਕਹਾਂ ਤਾਂ, ਮੈਂ ਸ਼ੁਰੂ ਵਿੱਚ ਇਸਨੂੰ ਚੰਗੀ ਤਰ੍ਹਾਂ ਨਹੀਂ ਸਮਝਦਾ ਸੀ। ਬਾਅਦ ਵਿੱਚ ਮੈਨੂੰ ਪਤਾ ਲੱਗਾ ਕਿ ਸਭ ਤੋਂ ਆਸਾਨ ਤਰੀਕਾ ਹੈ: AI ਨੂੰ ਤੁਹਾਡੀ ਸੰਰਚਨਾ ਕਰਨ ਦਿਓ। ਆਪਣਾ AI ਪ੍ਰੋਗਰਾਮਿੰਗ ਸਹਾਇਕ (Claude Code ਜਾਂ Codex) ਖੋਲ੍ਹੋ, ਅਤੇ ਇਸਨੂੰ ਦੱਸੋ: ਮੈਂ ਇਸ IDE ਵਿੱਚ "pencil" MCP ਇੰਸਟਾਲ ਕੀਤਾ ਹੈ, ਕਿਰਪਾ ਕਰਕੇ ਇਸਨੂੰ ਸੰਰਚਿਤ ਕਰਨ ਵਿੱਚ ਮੇਰੀ ਮਦਦ ਕਰੋ ਤਾਂ ਜੋ ਮੇਰਾ Claude Code, Codex, VS Code ਇਸ MCP ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਣ ਫਿਰ ਇਸਦੇ ਤੁਹਾਡੇ ਲਈ ਸੰਰਚਿਤ ਕਰਨ ਦੀ ਉਡੀਕ ਕਰੋ। ### ਤੀਜਾ ਕਦਮ: Pencil ਨਾਲ ਡਿਜ਼ਾਈਨ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰੋ ਸੰਰਚਿਤ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਤੁਸੀਂ IDE ਦੇ ਖੱਬੇ ਪਾਸੇ ਇੱਕ ਪੈਨਸਿਲ ਆਈਕਨ ਦੇਖੋਗੇ, ਇਸਨੂੰ ਖੋਲ੍ਹਣ ਲਈ ਕਲਿੱਕ ਕਰੋ Pencil ਦਾ ਕੈਨਵਸ ਹੈ। ਫਿਰ ਸੱਜੇ ਪਾਸੇ AI ਡਾਇਲਾਗ ਬਾਕਸ ਵਿੱਚ, ਇਸਨੂੰ ਦੱਸੋ ਕਿ ਤੁਸੀਂ ਕੀ ਡਿਜ਼ਾਈਨ ਚਾਹੁੰਦੇ ਹੋ। ਜਿਵੇਂ ਕਿ: "ਮੇਰੇ ਲਈ ਇੱਕ ਐਪਲ-ਸ਼ੈਲੀ ਦਾ ਮਿਊਜ਼ਿਕ ਪਲੇਅਰ ਡਿਜ਼ਾਈਨ ਕਰੋ" "ਇੱਕ ਸਧਾਰਨ ਲੈਂਡਿੰਗ ਪੇਜ ਬਣਾਓ, ਮੁੱਖ ਰੰਗ ਨੀਲਾ ਹੋਵੇ" "ਇਸ ਵੈੱਬਸਾਈਟ ਦੀ ਸ਼ੈਲੀ ਦੇ ਹਵਾਲੇ ਨਾਲ, ਮੇਰੇ ਲਈ ਇਸੇ ਤਰ੍ਹਾਂ ਦਾ ਇੱਕ ਬਣਾਓ" AI ਕੈਨਵਸ 'ਤੇ ਡਿਜ਼ਾਈਨ ਡਰਾਫਟ ਤਿਆਰ ਕਰੇਗਾ। ਜੇਕਰ ਤੁਸੀਂ ਸੰਤੁਸ਼ਟ ਨਹੀਂ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਇਸਨੂੰ ਐਡਜਸਟ ਕਰਨਾ ਜਾਰੀ ਰੱਖ ਸਕਦੇ ਹੋ: "ਫੌਂਟ ਬਹੁਤ ਛੋਟਾ ਹੈ, ਇਸਨੂੰ ਵੱਡਾ ਕਰੋ" "ਸਪੇਸਿੰਗ ਨੂੰ ਹੋਰ ਵੱਡਾ ਕਰੋ" "ਇੱਕ ਨਰਮ ਰੰਗ ਵਿੱਚ ਬਦਲੋ" ਜਦੋਂ ਤੱਕ ਤੁਸੀਂ ਸੰਤੁਸ਼ਟ ਨਹੀਂ ਹੋ ਜਾਂਦੇ, ਉਦੋਂ ਤੱਕ ਐਡਜਸਟ ਕਰਦੇ ਰਹੋ। ### ਚੌਥਾ ਕਦਮ: ਕੋਡ ਤਿਆਰ ਕਰੋ ਡਿਜ਼ਾਈਨ ਡਰਾਫਟ ਨੂੰ ਅੰਤਿਮ ਰੂਪ ਦੇਣ ਤੋਂ ਬਾਅਦ, ਤੁਸੀਂ AI ਨੂੰ ਤੁਹਾਡੇ ਲਈ ਕੋਡ ਤਿਆਰ ਕਰਨ ਲਈ ਕਹਿ ਸਕਦੇ ਹੋ। ਤੁਸੀਂ ਸਿੱਧਾ ਕਹਿ ਸਕਦੇ ਹੋ: "ਮੇਰੇ ਲਈ Next.js ਕੋਡ ਤਿਆਰ ਕਰੋ" "Flutter ਕੋਡ ਤਿਆਰ ਕਰੋ" "Vue 3 ਕੋਡ ਤਿਆਰ ਕਰੋ" AI ਤੁਹਾਡੇ ਡਿਜ਼ਾਈਨ ਡਰਾਫਟ ਦੇ ਅਨੁਸਾਰ, ਆਪਣੇ ਆਪ ਹੀ ਸੰਬੰਧਿਤ ਕੋਡ ਤਿਆਰ ਕਰੇਗਾ। ਅਸਲ ਪ੍ਰਭਾਵ: ## 04. ਕੁਝ ਅਸਲ ਵਰਤੋਂ ਦੇ ਤਜ਼ਰਬੇ ਕਈ ਵਾਰ ਵਰਤਣ ਤੋਂ ਬਾਅਦ, ਇੱਥੇ ਕੁਝ ਵਿਚਾਰ ਹਨ ਜੋ ਮੈਂ ਸਾਂਝੇ ਕਰਨਾ ਚਾਹਾਂਗਾ: ### 1) ਲੋੜਾਂ ਨੂੰ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਦੱਸੋ ਸ਼ੁਰੂ ਵਿੱਚ ਮੈਂ ਕਹਾਂਗਾ "ਮੇਰੇ ਲਈ ਇੱਕ ਵੈੱਬਸਾਈਟ ਬਣਾਓ", ਪਰ AI ਦੁਆਰਾ ਤਿਆਰ ਕੀਤੀ ਗਈ ਚੀਜ਼ ਉਹ ਨਹੀਂ ਸੀ ਜੋ ਮੈਂ ਚਾਹੁੰਦਾ ਸੀ। ਬਾਅਦ ਵਿੱਚ ਮੈਨੂੰ ਪਤਾ ਲੱਗਾ ਕਿ ਜਿੰਨਾ ਜ਼ਿਆਦਾ ਤੁਸੀਂ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਦੱਸੋਗੇ, ਓਨਾ ਹੀ ਵਧੀਆ ਨਤੀਜਾ ਹੋਵੇਗਾ। ਜਿਵੇਂ ਕਿ: ਮਾੜਾ ਵੇਰਵਾ: "ਮੇਰੇ ਲਈ ਇੱਕ ਲੌਗਇਨ ਪੇਜ ਬਣਾਓ" ਚੰਗਾ ਵੇਰਵਾ: "ਮੇਰੇ ਲਈ ਇੱਕ ਸਧਾਰਨ ਲੌਗਇਨ ਪੇਜ ਬਣਾਓ, ਜਿਸਦੇ ਸਿਖਰ 'ਤੇ ਇੱਕ ਲੋਗੋ ਹੋਵੇ, ਵਿਚਕਾਰ ਈਮੇਲ ਅਤੇ ਪਾਸਵਰਡ ਇਨਪੁਟ ਬਾਕਸ ਹੋਣ, ਅਤੇ ਹੇਠਾਂ ਇੱਕ ਲੌਗਇਨ ਬਟਨ ਹੋਵੇ, ਸ਼ੈਲੀ ਐਪਲ ਦੀ ਅਧਿਕਾਰਤ ਵੈੱਬਸਾਈਟ ਦੇ ਸਮਾਨ ਹੋਵੇ" ### 2) ਤੁਸੀਂ ਹਵਾਲਾ ਚਿੱਤਰ ਅੱਪਲੋਡ ਕਰ ਸਕਦੇ ਹੋ ਜੇਕਰ ਤੁਸੀਂ ਕਿਸੇ ਵੈੱਬਸਾਈਟ ਦਾ ਡਿਜ਼ਾਈਨ ਵਧੀਆ ਦੇਖਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਇੱਕ ਸਕ੍ਰੀਨਸ਼ੌਟ ਲੈ ਕੇ AI ਨੂੰ ਅੱਪਲੋਡ ਕਰ ਸਕਦੇ ਹੋ, ਅਤੇ ਇਸਨੂੰ ਹਵਾਲੇ ਵਜੋਂ ਵਰਤਣ ਲਈ ਕਹਿ ਸਕਦੇ ਹੋ। ਇਸ ਤਰ੍ਹਾਂ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਡਿਜ਼ਾਈਨ ਡਰਾਫਟ ਤੁਹਾਡੀਆਂ ਉਮੀਦਾਂ ਦੇ ਨੇੜੇ ਹੋਵੇਗਾ। ### 3) ਇੱਕ ਵਾਰ ਵਿੱਚ ਸਭ ਕੁਝ ਕਰਨ ਨਾਲੋਂ ਦੁਹਰਾਉਣਾ ਜ਼ਿਆਦਾ ਮਹੱਤਵਪੂਰਨ ਹੈ ਇੱਕ ਵਾਰ ਵਿੱਚ ਇੱਕ ਸੰਪੂਰਨ ਡਿਜ਼ਾਈਨ ਤਿਆਰ ਕਰਨ ਬਾਰੇ ਨਾ ਸੋਚੋ, ਇਹ ਅਸੰਭਵ ਹੈ। ਸਹੀ ਤਰੀਕਾ ਹੈ: ਪਹਿਲਾਂ ਇੱਕ ਮੋਟਾ ਡਰਾਫਟ ਤਿਆਰ ਕਰੋ, ਅਤੇ ਫਿਰ ਇਸਨੂੰ ਥੋੜਾ-ਥੋੜਾ ਕਰਕੇ ਐਡਜਸਟ ਕਰੋ। ਹਰ ਵਾਰ ਸਿਰਫ਼ ਇੱਕ ਜਾਂ ਦੋ ਚੀਜ਼ਾਂ ਨੂੰ ਐਡਜਸਟ ਕਰੋ, ਜਿਵੇਂ ਕਿ "ਸਪੇਸਿੰਗ ਨੂੰ ਹੋਰ ਵੱਡਾ ਕਰੋ" "ਰੰਗ ਨੂੰ ਹੋਰ ਨਰਮ ਕਰੋ", ਇਹ ਸਭ ਤੋਂ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੈ। ### 4) ਕੋਡ ਦੀ ਗੁਣਵੱਤਾ ਕਾਫ਼ੀ ਚੰਗੀ ਹੈ ਮੈਂ ਇਸਨੂੰ ਕਈ ਵਾਰ ਅਜ਼ਮਾਇਆ, ਅਤੇ ਤਿਆਰ ਕੀਤੇ ਕੋਡ ਦੀ ਗੁਣਵੱਤਾ ਕਾਫ਼ੀ ਉੱਚੀ ਹੈ: ਕੋਡ ਢਾਂਚਾ ਸਪੱਸ਼ਟ ਹੈ ਸ਼ੈਲੀ ਰੀਸਟੋਰੇਸ਼ਨ ਡਿਗਰੀ ਉੱਚੀ ਹੈ (98% +) ਜਵਾਬਦੇਹ ਲੇਆਉਟ ਵੀ ਵਧੀਆ ਢੰਗ ਨਾਲ ਕੀਤਾ ਗਿਆ ਹੈ ਮੂਲ ਰੂਪ ਵਿੱਚ ਇਸਨੂੰ ਥੋੜਾ ਜਿਹਾ ਬਦਲ ਕੇ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ। ## 05. ਕੁਝ ਨੁਕਤੇ ਜਿਨ੍ਹਾਂ 'ਤੇ ਧਿਆਨ ਦੇਣ ਦੀ ਲੋੜ ਹੈ ਹਾਲਾਂਕਿ Pencil ਵਰਤਣ ਵਿੱਚ ਬਹੁਤ ਵਧੀਆ ਹੈ, ਪਰ ਇੱਥੇ ਕੁਝ ਨੁਕਤੇ ਹਨ ਜਿਨ੍ਹਾਂ 'ਤੇ ਧਿਆਨ ਦੇਣ ਦੀ ਲੋੜ ਹੈ: ### 1) ਸੁਹਜ ਸ਼ਾਸਤਰ ਅਜੇ ਵੀ ਤੁਹਾਡੇ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ AI ਤੁਹਾਡੇ ਲਈ ਡਿਜ਼ਾਈਨ ਡਰਾਫਟ ਤਿਆਰ ਕਰ ਸਕਦਾ ਹੈ, ਪਰ ਇਹ ਦੇਖਣ ਲਈ ਕਿ ਇਹ ਵਧੀਆ ਹੈ ਜਾਂ ਨਹੀਂ, ਇਹ ਫੈਸਲਾ ਤੁਹਾਨੂੰ ਕਰਨਾ ਪਵੇਗਾ। ਇਸ ਲਈ ਆਮ ਤੌਰ 'ਤੇ ਕੁਝ ਵਧੀਆ ਡਿਜ਼ਾਈਨ ਦੇਖੋ, ਆਪਣੇ ਸੁਹਜ ਸ਼ਾਸਤਰ ਨੂੰ ਸੁਧਾਰੋ, ਤਾਂ ਜੋ Pencil ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਤੁਸੀਂ ਬਿਹਤਰ ਮਾਰਗਦਰਸ਼ਨ ਦੇ ਸਕੋ। ਡਿਜ਼ਾਈਨ ਹਵਾਲੇ ਲੱਭਣ ਲਈ ਕੁਝ ਥਾਵਾਂ ਦੀ ਸਿਫ਼ਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ: Dribbble Mobbin (ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਮੋਬਾਈਲ UI ਇਕੱਠਾ ਕਰਦਾ ਹੈ) ਵੱਖ-ਵੱਖ ਸ਼ਾਨਦਾਰ ਵੈੱਬਸਾਈਟਾਂ ਦੇ ਸਕ੍ਰੀਨਸ਼ੌਟਸ ### 2) ਗੁੰਝਲਦਾਰ ਪਰਸਪਰ ਪ੍ਰਭਾਵ ਅਜੇ ਵੀ ਤੁਹਾਨੂੰ ਲਿਖਣ ਦੀ ਲੋੜ ਹੈ Pencil ਸਥਿਰ ਪੰਨਿਆਂ ਅਤੇ ਆਮ ਪਰਸਪਰ ਪ੍ਰਭਾਵ ਬਣਾਉਣ ਲਈ ਢੁਕਵਾਂ ਹੈ, ਪਰ ਜੇਕਰ ਇਸ ਵਿੱਚ ਗੁੰਝਲਦਾਰ ਐਨੀਮੇਸ਼ਨ, ਇਸ਼ਾਰੇ ਆਦਿ ਸ਼ਾਮਲ ਹਨ, ਤਾਂ ਤੁਹਾਨੂੰ ਅਜੇ ਵੀ ਕੋਡ ਲਿਖਣ ਦੀ ਲੋੜ ਹੈ। ਹਾਲਾਂਕਿ ਜ਼ਿਆਦਾਤਰ ਦ੍ਰਿਸ਼ਾਂ ਲਈ, Pencil ਪਹਿਲਾਂ ਹੀ ਕਾਫ਼ੀ ਹੈ। ### 3) ਸਹੀ AI ਮਾਡਲ ਦੀ ਚੋਣ ਕਰਨਾ ਬਹੁਤ ਮਹੱਤਵਪੂਰਨ ਹੈ ਮੈਂ ਕਈ ਮਾਡਲਾਂ ਨੂੰ ਅਜ਼ਮਾਇਆ, ਅਤੇ ਪਾਇਆ ਕਿ Claude Opus 4.5 ਦਾ ਵਿਜ਼ੂਅਲ ਪ੍ਰਦਰਸ਼ਨ ਸਭ ਤੋਂ ਵਧੀਆ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਹੋਰ ਮਾਡਲ ਵਰਤਦੇ ਹੋ, ਤਾਂ ਤਿਆਰ ਕੀਤੇ ਡਿਜ਼ਾਈਨ ਡਰਾਫਟ ਦੀ ਗੁਣਵੱਤਾ ਥੋੜੀ ਮਾੜੀ ਹੋ ਸਕਦੀ ਹੈ। ## 06. ਕੁਸ਼ਲਤਾ ਤੁਲਨਾ ਡਾਟਾ ਅੰਤ ਵਿੱਚ ਮੈਂ ਆਪਣੇ ਦੁਆਰਾ ਅਸਲ ਵਿੱਚ ਟੈਸਟ ਕੀਤੇ ਡਾਟਾ ਦਾ ਇੱਕ ਸਮੂਹ ਸਾਂਝਾ ਕਰਾਂਗਾ:

ਸੂਚਕ	ਰਵਾਇਤੀ ਤਰੀਕਾ	Pencil ਦੀ ਵਰਤੋਂ ਕਰਨਾ	ਕੁਸ਼ਲਤਾ ਵਿੱਚ ਸੁਧਾਰ
ਡਿਜ਼ਾਈਨ ਡਰਾਫਟ ਉਤਪਾਦਨ	4-6 ਘੰਟੇ	20-40 ਮਿੰਟ	8 ਗੁਣਾ
ਕੋਡ ਰੀਸਟੋਰੇਸ਼ਨ ਡਿਗਰੀ	70%-85%	98%+
ਗਲਤੀ ਸੁਧਾਰਨ ਦਾ ਸਮਾਂ		90% ਘੱਟ
ਮਲਟੀ-ਟਰਮੀਨਲ ਅਡਾਪਟੇਸ਼ਨ	ਦੁਹਰਾਉਣ ਵਾਲੀ ਡਿਵੈਲਪਮੈਂਟ ਦੀ ਲੋੜ ਹੈ	ਆਟੋਮੈਟਿਕ ਉਤਪਾਦਨ	75% ਸਮਾਂ ਬਚਾਓ

ਮੇਰੇ ਲਈ, ਸਭ ਤੋਂ ਵੱਡਾ ਮੁੱਲ ਇਹ ਹੈ: ਊਰਜਾ ਨੂੰ "ਕਿਵੇਂ ਲਾਗੂ ਕਰਨਾ ਹੈ" ਤੋਂ "ਕਿਹੜਾ ਫੰਕਸ਼ਨ ਕਰਨਾ ਹੈ" ਵੱਲ ਤਬਦੀਲ ਕਰਨਾ। ## 07. ਸੰਖੇਪ Pencil ਅਸਲ ਵਿੱਚ ਡਿਜ਼ਾਈਨ ਅਤੇ ਡਿਵੈਲਪਮੈਂਟ ਨੂੰ ਜੋੜਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਪੂਰੀ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਚਲਾਉਣ ਲਈ ਕੁਦਰਤੀ ਭਾਸ਼ਾ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ। ਜੇਕਰ ਤੁਸੀਂ ਵੀ ਫਰੰਟ-ਐਂਡ ਡਿਵੈਲਪਮੈਂਟ ਕਰ ਰਹੇ ਹੋ, ਆਪਣੇ ਉਤਪਾਦ ਬਣਾ ਰਹੇ ਹੋ, ਤਾਂ ਮੈਂ ਜ਼ੋਰਦਾਰ ਸਿਫ਼ਾਰਸ਼ ਕਰਦਾ ਹਾਂ ਕਿ ਤੁਸੀਂ Pencil ਨੂੰ ਅਜ਼ਮਾਓ:ਕੋਡ ਦੀ ਗੁਣਵੱਤਾ ਸਥਿਰ: 98%+ ਰੀਸਟੋਰੇਸ਼ਨ, ਸਟਾਈਲ ਨੂੰ ਐਡਜਸਟ ਕਰਨ ਦੀ ਕੋਈ ਲੋੜ ਨਹੀਂ ਮਲਟੀ-ਟੈਕਨਾਲੋਜੀ ਸਟੈਕ ਸਪੋਰਟ: Next.js, Flutter, Vue ਆਦਿ ਸਭ ਵਰਤੇ ਜਾ ਸਕਦੇ ਹਨ ਕੁਦਰਤੀ ਭਾਸ਼ਾ ਦੁਆਰਾ ਸੰਚਾਲਿਤ: ਲੋੜਾਂ ਨੂੰ ਆਮ ਬੋਲਚਾਲ ਵਿੱਚ ਦੱਸੋ, AI ਆਪਣੇ ਆਪ ਤਿਆਰ ਕਰੇਗਾ ਅੰਤ ਵਿੱਚ, ਜੇਕਰ ਤੁਸੀਂ ਵੀ ਸੁਤੰਤਰ ਵਿਕਾਸ, AI ਪ੍ਰੋਗਰਾਮਿੰਗ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਟਿੱਪਣੀ ਕਰਨ ਲਈ ਸੁਆਗਤ ਹੈ: ਤੁਸੀਂ ਆਮ ਤੌਰ 'ਤੇ ਡਿਜ਼ਾਈਨ ਕਿਵੇਂ ਕਰਦੇ ਹੋ? ਕੀ ਤੁਸੀਂ ਕਦੇ Pencil ਵਰਤਿਆ ਹੈ? ਇਸਦਾ ਪ੍ਰਭਾਵ ਕਿਹੋ ਜਿਹਾ ਹੈ? ਮੈਂ ਹਰ ਟਿੱਪਣੀ ਨੂੰ ਧਿਆਨ ਨਾਲ ਪੜ੍ਹਾਂਗਾ। ਅਗਲੀ ਵਾਰ ਮਿਲਦੇ ਹਾਂ।