ಪೆನ್ಸಿಲ್ MCP: ವಿನ್ಯಾಸದ ಕಲ್ಪನೆಗಳು ತಕ್ಷಣವೇ ಕೋಡ್ ಆಗಿ ಪರಿವರ್ತನೆ, ಫ್ರಂಟ್-ಎಂಡ್ ಅಭಿವೃದ್ಧಿ ದಕ್ಷತೆಯು 8 ಪಟ್ಟು ಹೆಚ್ಚಳ

ನಮಸ್ಕಾರ, ನಾನು ವಿದೇಶಿ ಉತ್ಪನ್ನಗಳನ್ನು ತಯಾರಿಸುವ ಲಿಯಾಂಗ್ ಕ್ಸಿಯಾವೊ. ಹೊಸ ವರ್ಷ ಹತ್ತಿರವಾಗುತ್ತಿದೆ, ವರ್ಷದ ಮೊದಲು ನಿಮ್ಮೊಂದಿಗೆ ಇತ್ತೀಚಿನ ಅನುಭವಗಳನ್ನು ಹಂಚಿಕೊಳ್ಳಲು ಲೇಖನವನ್ನು ಪ್ರಕಟಿಸುತ್ತಿದ್ದೇನೆ.

ವೆಬ್‌ಪುಟಗಳು ಅಥವಾ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಮಾಡುವಾಗ, ನಿಮಗೆ ಈ ರೀತಿಯ ಭಾವನೆ ಇದೆಯೇ:

ಒಂದು ಸುಂದರವಾದ ಪುಟವನ್ನು ಮಾಡಲು ಬಯಸುತ್ತೀರಿ, ಆದರೆ ನಿಮ್ಮ ಸ್ವಂತ ವಿನ್ಯಾಸವು ಉತ್ತಮವಾಗಿಲ್ಲ ವಿನ್ಯಾಸಕರು ತುಂಬಾ ದುಬಾರಿ, ಮತ್ತು ಉಚಿತ ಟೆಂಪ್ಲೇಟ್‌ಗಳು ಸೂಕ್ತವಲ್ಲ ಅಂತಿಮವಾಗಿ ವಿನ್ಯಾಸದ ಕರಡನ್ನು ಪಡೆದ ನಂತರ, ಅದನ್ನು ಕೋಡ್‌ಗೆ ಪರಿವರ್ತಿಸುವುದು ಒಂದು ದೊಡ್ಡ ಸಮಸ್ಯೆಯಾಗಿದೆ ನಿಜ ಹೇಳಬೇಕೆಂದರೆ, ನಾನು ಮೊದಲು ಫ್ರಂಟ್-ಎಂಡ್ ಯೋಜನೆಗಳನ್ನು ಮಾಡಿದಾಗ, ವಿನ್ಯಾಸದ ಕರಡನ್ನು ನೋಡಿಕೊಂಡು ಶೈಲಿಯನ್ನು ಸರಿಹೊಂದಿಸಲು ಅರ್ಧ ದಿನ ತೆಗೆದುಕೊಳ್ಳುತ್ತಿತ್ತು. ಅಂತರವು 2px ವ್ಯತ್ಯಾಸವಾಗುತ್ತಿತ್ತು, ಬಣ್ಣವು ಸರಿಯಾಗಿಲ್ಲ, ದುಂಡಗಿನ ಮೂಲೆಗಳನ್ನು ಸೇರಿಸಲು ಮರೆತುಹೋಗಿದೆ... ಪದೇ ಪದೇ, ಕಿರಿಕಿರಿ ಉಂಟಾಗುತ್ತಿತ್ತು.

ಒಳ್ಳೆಯ ಸುದ್ದಿ ಏನೆಂದರೆ: ಈಗ ಪೆನ್ಸಿಲ್ ಎಂಬ MCP ಇದೆ, ಈ ಸಮಸ್ಯೆಗಳನ್ನು ಮೂಲಭೂತವಾಗಿ ಪರಿಹರಿಸಬಹುದು.

ಇತ್ತೀಚೆಗೆ ನಾನು ಅದನ್ನು ಬಳಸಿ ಕೆಲವು ಪುಟಗಳನ್ನು ಮಾಡಿದ್ದೇನೆ, ಅದು ನಿಜವಾಗಿಯೂ ಪರಿಣಾಮಕಾರಿಯಾಗಿದೆ ಎಂದು ಕಂಡುಕೊಂಡಿದ್ದೇನೆ - ವಿನ್ಯಾಸದ ಕರಡಿನಿಂದ ಕೋಡ್‌ಗೆ, ದಕ್ಷತೆಯು ನೇರವಾಗಿ ಹಲವಾರು ಪಟ್ಟು ಹೆಚ್ಚಾಗಿದೆ. ಮತ್ತು ಮುಖ್ಯ ವಿಷಯವೆಂದರೆ, AI ನಿಮಗೆ ಉತ್ಪಾದಿಸುವ ವಿನ್ಯಾಸದ ಕರಡಿನ ಗುಣಮಟ್ಟವು ಉತ್ತಮವಾಗಿದೆ, ಮತ್ತು ಕೋಡ್‌ನ ನಿಷ್ಠೆಯು ಸಹ ತುಂಬಾ ಹೆಚ್ಚಾಗಿದೆ.

ಈ ಲೇಖನದಲ್ಲಿ ನಾವು ಚರ್ಚಿಸುತ್ತೇವೆ: ಪೆನ್ಸಿಲ್ ಎಂದರೇನು, ಅದು ಏಕೆ ಬಳಸಲು ಯೋಗ್ಯವಾಗಿದೆ ಮತ್ತು ಅದನ್ನು ತ್ವರಿತವಾಗಿ ಹೇಗೆ ಪ್ರಾರಂಭಿಸುವುದು.

01. ಪೆನ್ಸಿಲ್ ಎಂದರೇನು? ಸರಳ ಭಾಷೆಯಲ್ಲಿ ವಿವರಿಸಿ

ಸರಳವಾಗಿ ಹೇಳುವುದಾದರೆ, ಪೆನ್ಸಿಲ್ ವಿನ್ಯಾಸ ಮತ್ತು ಕೋಡ್ ಅನ್ನು ಸಂಪರ್ಕಿಸುವ ಸಾಧನವಾಗಿದೆ.

ಹಿಂದಿನ ಪ್ರಕ್ರಿಯೆ ಹೀಗಿತ್ತು:

Figma ನಲ್ಲಿ ವಿನ್ಯಾಸದ ಕರಡನ್ನು ರಚಿಸಿ ವಿನ್ಯಾಸಕರು ಗಾತ್ರಗಳು, ಬಣ್ಣಗಳು ಮತ್ತು ಅಂತರಗಳನ್ನು ಗುರುತಿಸುತ್ತಾರೆ ಡೆವಲಪರ್‌ಗಳು ವಿನ್ಯಾಸದ ಕರಡನ್ನು ನೋಡಿಕೊಂಡು ಒಂದು ಸಾಲಿನಂತೆ ಕೋಡ್ ಬರೆಯುತ್ತಾರೆ ಬರೆದ ನಂತರ ವಿನ್ಯಾಸದ ಕರಡಿನೊಂದಿಗೆ ಹೋಲಿಕೆ ಮಾಡಿ, ಮತ್ತು ನಿಷ್ಠೆಯು ಕೇವಲ 70%-80% ಮಾತ್ರ ಇರುತ್ತದೆ ಮರುಹೊಂದಿಸಿ, ಸಂವಹನ ಮಾಡಿ...

ಪೆನ್ಸಿಲ್‌ನ ಪರಿಹಾರ ಹೀಗಿದೆ:

ನೀವು ನೈಸರ್ಗಿಕ ಭಾಷೆಯಲ್ಲಿ ಅಗತ್ಯವನ್ನು ವಿವರಿಸಬೇಕು (ಉದಾಹರಣೆಗೆ "ನನಗೆ ಆಪಲ್ ಶೈಲಿಯ ಸಂಗೀತ ಪ್ಲೇಯರ್ ಅನ್ನು ವಿನ್ಯಾಸ ಮಾಡಲು ಸಹಾಯ ಮಾಡಿ"), AI ನೇರವಾಗಿ ಕ್ಯಾನ್ವಾಸ್‌ನಲ್ಲಿ ವಿನ್ಯಾಸದ ಕರಡನ್ನು ಉತ್ಪಾದಿಸುತ್ತದೆ, ತದನಂತರ ಒಂದು ಕ್ಲಿಕ್‌ನಲ್ಲಿ ಅನುಗುಣವಾದ ಕೋಡ್ ಅನ್ನು ಉತ್ಪಾದಿಸುತ್ತದೆ (Next.js, Flutter, Vue, ಇತ್ಯಾದಿ ಎಲ್ಲವನ್ನೂ ಬೆಂಬಲಿಸಲಾಗುತ್ತದೆ).

ಮತ್ತು ಅದ್ಭುತ ಸಂಗತಿಯೆಂದರೆ, ನೀವು ವಿನ್ಯಾಸ ಮಾಡುವಾಗ ಸರಿಹೊಂದಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ:

"ನೇರಳೆ ಬಣ್ಣವು ತುಂಬಾ ಹೆಚ್ಚಾಗಿದೆ, ಸ್ವಲ್ಪ ಹಸಿರು ಬಣ್ಣಕ್ಕೆ ಬದಲಾಯಿಸಿ" "ಅಂತರವನ್ನು ಸ್ವಲ್ಪ ದೊಡ್ಡದಾಗಿಸಿ" "ಈ ವೆಬ್‌ಸೈಟ್‌ನ ಶೈಲಿಯನ್ನು ಉಲ್ಲೇಖಿಸಿ" AI ನಿಮಗೆ ವಿನ್ಯಾಸ ಮತ್ತು ಕೋಡ್ ಅನ್ನು ನೈಜ ಸಮಯದಲ್ಲಿ ಸರಿಹೊಂದಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ, ನೀವು ಸ್ವತಃ ಏನನ್ನೂ ಮಾಡಬೇಕಾಗಿಲ್ಲ.

02. ಪೆನ್ಸಿಲ್ ಬಳಸಲು ಯೋಗ್ಯವಾಗಿದೆ ಎಂದು ನಾನು ಏಕೆ ಭಾವಿಸುತ್ತೇನೆ?

1) ದಕ್ಷತೆಯು ನಿಜವಾಗಿಯೂ ಹೆಚ್ಚಾಗಿದೆ

ಸಾಂಪ್ರದಾಯಿಕ ರೀತಿಯಲ್ಲಿ ಒಂದು ಪುಟದ ವಿನ್ಯಾಸದ ಕರಡನ್ನು ಮಾಡಲು 4-6 ಗಂಟೆಗಳು ಬೇಕಾಗಬಹುದು. ಪೆನ್ಸಿಲ್ ಬಳಸಿ, 20-40 ನಿಮಿಷಗಳಲ್ಲಿ ಮಾಡಬಹುದು.

ಮತ್ತು ಕೋಡ್‌ನ ನಿಷ್ಠೆಯು 98%+ ತಲುಪಬಹುದು, ಮೂಲಭೂತವಾಗಿ ನೀವು ಶೈಲಿಯನ್ನು ಸರಿಹೊಂದಿಸಬೇಕಾಗಿಲ್ಲ.

ನಾನು ಸ್ವತಃ ಪ್ರಯತ್ನಿಸಿದೆ, ಒಂದು ಸರಳವಾದ ಲ್ಯಾಂಡಿಂಗ್ ಪುಟವನ್ನು ವಿನ್ಯಾಸದಿಂದ ಕೋಡ್‌ವರೆಗೆ ಪೂರ್ಣಗೊಳಿಸಲು, ಸುಮಾರು ಅರ್ಧ ಗಂಟೆ ತೆಗೆದುಕೊಂಡಿತು.

2) ವಿನ್ಯಾಸದ ಗುಣಮಟ್ಟವು ಸ್ಥಿರವಾಗಿದೆ

ಹಿಂದೆ AI ಅನ್ನು ಬಳಸಿ ವಿನ್ಯಾಸದ ಕರಡನ್ನು ಉತ್ಪಾದಿಸಿದಾಗ, ಈ ರೀತಿಯ ಸಮಸ್ಯೆಗಳನ್ನು ಎದುರಿಸಬೇಕಾಗುತ್ತಿತ್ತು:

ಬಣ್ಣ ಹೊಂದಾಣಿಕೆಯಾಗುವುದಿಲ್ಲ ಅಂತರವು ಗೊಂದಲಮಯವಾಗಿರುತ್ತದೆ ಫಾಂಟ್ ಗಾತ್ರವು ಸ್ಥಿರವಾಗಿಲ್ಲ ಪೆನ್ಸಿಲ್ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆ ಮತ್ತು ಸೌಂದರ್ಯದ ಮಾನದಂಡವನ್ನು ಹೊಂದಿದೆ, ಉತ್ಪಾದನೆಯಾಗುವ ವಿನ್ಯಾಸದ ಕರಡಿನ ಗುಣಮಟ್ಟವು ತುಲನಾತ್ಮಕವಾಗಿ ಸ್ಥಿರವಾಗಿರುತ್ತದೆ. ಇದು ಪರಿಪೂರ್ಣವಾಗಿಲ್ಲದಿದ್ದರೂ, ಕನಿಷ್ಠ ತುಂಬಾ ಕೆಟ್ಟದಾಗಿರುವುದಿಲ್ಲ.

3) ಬಹು ತಂತ್ರಜ್ಞಾನ ಸ್ಟಾಕ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ

ನೀವು Next.js, Flutter, Vue ಅಥವಾ SwiftUI ಅನ್ನು ಬಳಸುತ್ತಿರಲಿ, ಪೆನ್ಸಿಲ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಅನುಗುಣವಾದ ಕೋಡ್ ಅನ್ನು ಉತ್ಪಾದಿಸುತ್ತದೆ.

ನನ್ನಂತಹ ಬಹು-ಅಂತ್ಯದ ಅಭಿವೃದ್ಧಿಯನ್ನು ಮಾಡುವವರಿಗೆ, ಇದು ತುಂಬಾ ಅನುಕೂಲಕರವಾಗಿದೆ - ಒಂದು ವಿನ್ಯಾಸದ ಕರಡು, ಬಹು ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳ ಕೋಡ್ ಲಭ್ಯವಿದೆ.

03. ಪೆನ್ಸಿಲ್ ಅನ್ನು ಹೇಗೆ ಸ್ಥಾಪಿಸುವುದು ಮತ್ತು ಬಳಸುವುದು?

ನಾನು ನನ್ನ ಸ್ವಂತ ಅನುಸ್ಥಾಪನಾ ಮತ್ತು ಬಳಕೆಯ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಹಂಚಿಕೊಳ್ಳುತ್ತೇನೆ, ಇದು ಪ್ರಸ್ತುತ ಸರಳವಾದ ಮಾರ್ಗವಾಗಿದೆ.

ಮೊದಲ ಹಂತ: ಪೆನ್ಸಿಲ್ MCP ಅನ್ನು ಸ್ಥಾಪಿಸಿ

ನಿಮ್ಮ IDE (VS Code, Cursor, ಇತ್ಯಾದಿ) ನಲ್ಲಿ ನೇರವಾಗಿ "pencil" ಎಂದು ಹುಡುಕಿ

ಸ್ಥಾಪಿಸಲು ಕ್ಲಿಕ್ ಮಾಡಿ, ಬೇರೆಲ್ಲಿಯೂ ಡೌನ್‌ಲೋಡ್ ಮಾಡಬೇಡಿ (ಕೃತಿಸ್ವಾಮ್ಯ ಉಲ್ಲಂಘನೆಯನ್ನು ತಪ್ಪಿಸಲು)

ಗಮನಿಸಿ: IDE ನಲ್ಲಿ ನೇರವಾಗಿ ಹುಡುಕುವುದು ಸುರಕ್ಷಿತ ಮಾರ್ಗವಾಗಿದೆ.

ಎರಡನೇ ಹಂತ: AI ನಿಮಗೆ ಕಾನ್ಫಿಗರ್ ಮಾಡಲು ಸಹಾಯ ಮಾಡಿ

ಸ್ಥಾಪಿಸಿದ ನಂತರ ಅದನ್ನು ಹೇಗೆ ಕಾನ್ಫಿಗರ್ ಮಾಡುವುದು?

ನಿಜ ಹೇಳಬೇಕೆಂದರೆ, ನನಗೆ ಮೊದಲು ಅರ್ಥವಾಗಲಿಲ್ಲ. ನಂತರ ಸರಳವಾದ ಮಾರ್ಗವೆಂದರೆ: AI ನಿಮಗೆ ಕಾನ್ಫಿಗರ್ ಮಾಡಲು ಸಹಾಯ ಮಾಡುವುದು.

ನಿಮ್ಮ AI ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಸಹಾಯಕವನ್ನು (Claude Code ಅಥವಾ Codex) ತೆರೆಯಿರಿ ಮತ್ತು ಅದಕ್ಕೆ ಹೇಳಿ:

ನಾನು ಈ IDE ನಲ್ಲಿ "pencil" ಎಂಬ MCP ಅನ್ನು ಸ್ಥಾಪಿಸಿದ್ದೇನೆ, ದಯವಿಟ್ಟು ಅದನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಲು ಸಹಾಯ ಮಾಡಿ, ಇದರಿಂದ ನನ್ನ Claude Code, Codex, VS Code ಈ MCP ಅನ್ನು ಬಳಸಬಹುದು

ನಂತರ ಅದು ನಿಮಗೆ ಕಾನ್ಫಿಗರ್ ಮಾಡಲು ಕಾಯಿರಿ.

ಮೂರನೇ ಹಂತ: ಪೆನ್ಸಿಲ್ ಬಳಸಿ ವಿನ್ಯಾಸ ಮಾಡಲು ಪ್ರಾರಂಭಿಸಿ

ಕಾನ್ಫಿಗರ್ ಮಾಡಿದ ನಂತರ, ನಿಮ್ಮ IDE ಯ ಎಡಭಾಗದಲ್ಲಿ ನೀವು ಪೆನ್ಸಿಲ್ ಐಕಾನ್ ಅನ್ನು ನೋಡುತ್ತೀರಿ, ಅದನ್ನು ತೆರೆಯಲು ಕ್ಲಿಕ್ ಮಾಡಿ, ಅದು ಪೆನ್ಸಿಲ್‌ನ ಕ್ಯಾನ್ವಾಸ್ ಆಗಿದೆ.

ನಂತರ ಬಲಭಾಗದಲ್ಲಿರುವ 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. ದಕ್ಷತೆಯ ಹೋಲಿಕೆ ಡೇಟಾ

ಕೊನೆಯದಾಗಿ ನಾನು ಸ್ವತಃ ಪರೀಕ್ಷಿಸಿದ ಡೇಟಾದ ಗುಂಪನ್ನು ಹಂಚಿಕೊಳ್ಳುತ್ತೇನೆ:

ನನಗೆ, ದೊಡ್ಡ ಮೌಲ್ಯವೆಂದರೆ: "ಅದನ್ನು ಹೇಗೆ ಕಾರ್ಯಗತಗೊಳಿಸುವುದು" ಎಂಬುದರಿಂದ "ಯಾವ ಕಾರ್ಯವನ್ನು ಮಾಡಬೇಕು" ಎಂಬುದರ ಮೇಲೆ ಗಮನವನ್ನು ವರ್ಗಾಯಿಸುವುದು.

07. ಸಾರಾಂಶ

Pencil ಮೂಲಭೂತವಾಗಿ ವಿನ್ಯಾಸ ಮತ್ತು ಅಭಿವೃದ್ಧಿಯನ್ನು ಒಟ್ಟಿಗೆ ಸೇರಿಸುತ್ತದೆ, ಇದು ಸಂಪೂರ್ಣ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಚಲಾಯಿಸಲು ನೈಸರ್ಗಿಕ ಭಾಷೆಯನ್ನು ಬಳಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ನೀವು ಫ್ರಂಟ್-ಎಂಡ್ ಅಭಿವೃದ್ಧಿಯನ್ನು ಮಾಡುತ್ತಿದ್ದರೆ, ನಿಮ್ಮ ಸ್ವಂತ ಉತ್ಪನ್ನವನ್ನು ಮಾಡುತ್ತಿದ್ದರೆ, Pencil ಅನ್ನು ಪ್ರಯತ್ನಿಸಲು ನಾನು ಬಲವಾಗಿ ಶಿಫಾರಸು ಮಾಡುತ್ತೇನೆ:ಕೋಡ್ ಗುಣಮಟ್ಟ ಸ್ಥಿರವಾಗಿದೆ: 98%+ ನಿಖರತೆ, ಶೈಲಿಯನ್ನು ಸರಿಹೊಂದಿಸುವ ಅಗತ್ಯವಿಲ್ಲ

ಬಹು ತಂತ್ರಜ್ಞಾನ ಸ್ಟಾಕ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ: Next.js, Flutter, Vue ಇತ್ಯಾದಿಗಳನ್ನು ಬಳಸಬಹುದು

ನೈಸರ್ಗಿಕ ಭಾಷಾ ಚಾಲಿತ: ಮಾನವ ಭಾಷೆಯಲ್ಲಿ ಅಗತ್ಯಗಳನ್ನು ವಿವರಿಸಿ, AI ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಉತ್ಪಾದಿಸುತ್ತದೆ

ಅಂತಿಮವಾಗಿ, ನೀವು ಸ್ವತಂತ್ರ ಅಭಿವೃದ್ಧಿ, AI ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಮಾಡುತ್ತಿದ್ದರೆ, ಚರ್ಚಿಸಲು ಕಾಮೆಂಟ್ ಮಾಡಲು ಸ್ವಾಗತ:

ನೀವು ಸಾಮಾನ್ಯವಾಗಿ ವಿನ್ಯಾಸವನ್ನು ಹೇಗೆ ಮಾಡುತ್ತೀರಿ?

Pencil ಅನ್ನು ಬಳಸಿದ್ದೀರಾ? ಅದರ ಪರಿಣಾಮ ಹೇಗಿದೆ?

ನಾನು ಪ್ರತಿಯೊಂದು ಕಾಮೆಂಟ್‌ ಅನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ನೋಡುತ್ತೇನೆ. ಮುಂದಿನ ಲೇಖನದಲ್ಲಿ ಸಿಗೋಣ.